// components/CourseList.jsx

/**
 * Course List Component
 *
 * Displays a grid of course cards or skeleton placeholders while loading.
 */

// No imports needed as React is available globally

const CourseList = ({ courses = [], isLoading = true, itemsPerPage = 6 }) => {
  console.log('CourseList rendering with:', { courses, isLoading, itemsPerPage });

  // If loading, show skeleton cards
  if (isLoading) {
    return (
      <div className="course-list">
        {Array(itemsPerPage).fill(null).map((_, index) => (
          <div key={`skeleton-${index}`} className="skeleton-card">
            <div className="skeleton-image"></div>
            <div className="skeleton-content">
              <div className="skeleton-title"></div>
              <div className="skeleton-category"></div>
              <div className="skeleton-text"></div>
              <div className="skeleton-text short"></div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  // If no courses found, show message
  if (!courses || courses.length === 0) {
    return <div className="no-courses">No courses found</div>;
  }

  // Render actual course cards
  return (
    <div className="course-list-container">
      <div className="course-list">
        {courses.map(course => (
          <a key={course.id} href={`#/course/${course.id}`} className="course-card-link">
            <div className="course-item">
              <img src={course.image_url || '/images/default-course.jpg'} alt={course.title} />
              <div className="course-item-content">
                <h3>{course.title}</h3>
                <p className="course-category">{course.category}</p>
                <p className="course-description">{course.description}</p>
                <div className="course-meta">
                  <span className="rating">
                    {'★'.repeat(Math.floor(course.rating || 0))}
                    {'☆'.repeat(5 - Math.floor(course.rating || 0))}
                  </span>
                  <span className="enrollment">{course.enrollment_count || 0} students</span>
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
};

// Make CourseList component available globally
window.CourseList = CourseList;