// components/CourseCard.jsx

/**
 * Course Card Component
 *
 * Renders the visual structure (content) of a single course card,
 * including image, title, category, description, and metadata.
 * It expects to be wrapped in a link by its parent component.
 */

// React, PropTypes are globally available

function CourseCard({ course }) {
  // Use a default placeholder if image URL is missing or invalid
  const imageUrl = course.image_url || '/images/default-course.jpg'; // Adjust default path if needed
  const handleImageError = (e) => {
    // Fallback if the provided image URL fails to load
    e.target.onerror = null; // Prevent infinite loop if fallback also fails
    e.target.src = '/images/default-course.jpg'; // Adjust fallback path
  };

  // Helper to render stars based on rating
  const renderStars = (rating) => {
    const fullStars = Math.floor(rating || 0);
    const emptyStars = 5 - fullStars;
    // Simple star rendering - could use icons from Font Awesome if loaded
    return (
      <>
        {'★'.repeat(fullStars)}
        {'☆'.repeat(emptyStars)}
      </>
    );
  };

  return (
    // The parent component (CoursesPage) should wrap this in an <a> tag
    <article className="course-item">
      <img
        src={imageUrl}
        alt="" // Alt text is ideally handled by the wrapping link's context
        loading="lazy" // Improve performance for images below the fold
        onError={handleImageError} // Handle broken image links
      />
      <div className="course-item-content">
        <h3>{course.title || "Untitled Course"}</h3>

        {/* Display category if available */}
        {course.category && (
          <span className="course-category">{course.category}</span>
        )}

        {/* Description - potentially truncated by CSS */}
        <p className="course-description">
          {course.description || "No description available."}
        </p>

        {/* Course Metadata (Rating, Enrollment) */}
        <div className="course-meta">
          <span className="rating" title={`Rating: ${course.rating?.toFixed(1) || 0}/5`}>
            {renderStars(course.rating)}
            {/* Optional: Display numeric rating too */}
            {/* <span className="rating-value">({course.rating?.toFixed(1) || 'N/A'})</span> */}
          </span>
          <span className="enrollment" title={`${course.enrollment_count || 0} students enrolled`}>
            {/* Using Font Awesome icon assuming it's loaded */}
            <i className="fas fa-users"></i> {course.enrollment_count || 0}
          </span>
        </div>
      </div>
    </article>
  );
}

// --- Prop Type Validation (Development Only) ---
CourseCard.propTypes = {
  course: PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    title: PropTypes.string,
    description: PropTypes.string,
    image_url: PropTypes.string,
    category: PropTypes.string,
    rating: PropTypes.number,
    enrollment_count: PropTypes.number,
    // Add other expected props if needed by the card display
  }).isRequired,
};

// Make CourseCard globally available
window.CourseCard = CourseCard;