import React from 'react';
import { Course } from '../types';
import CourseCard from './CourseCard';

interface CourseCarouselProps {
  key?: string;
  title: string;
  courses: (Course & { progress?: number; totalLessons?: number; completedLessons?: number; isUnlocked?: boolean })[];
  onSelectCourse: (courseId: string) => void;
  onUnlockCourse?: (course: any) => void;
  subscriptionStatus: string;
}

export default function CourseCarousel({ title, courses, onSelectCourse, onUnlockCourse, subscriptionStatus }: CourseCarouselProps) {
  if (courses.length === 0) return null;

  return (
    <div className="space-y-4 py-4">
      {/* Category Title */}
      <div className="flex items-center space-x-2 border-l-4 border-[#E50914] pl-3">
        <h2 className="font-display font-extrabold text-lg md:text-xl text-white tracking-tight">
          {title}
        </h2>
        <span className="text-zinc-500 text-xs font-bold">
          ({courses.length} {courses.length === 1 ? 'curso' : 'cursos'})
        </span>
      </div>

      {/* Grid container (Scrollable on smaller viewports, neat grid on larger) */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {courses.map(course => (
          <CourseCard 
            key={course.id} 
            course={course} 
            onSelect={onSelectCourse} 
            onUnlockRequest={onUnlockCourse}
            subscriptionStatus={subscriptionStatus}
          />
        ))}
      </div>
    </div>
  );
}