import { Calendar, Clock4, User } from 'lucide-react'

import { CoursesCard } from '@/utils/courses-array'
import { Card } from './card'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from './ui/carousel'

export function CarouselComponent() {
  return (
    <section>
      <Carousel>
        <CarouselContent>
          {CoursesCard.map((course) => (
            <CarouselItem
              key={course.id}
              className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"
            >
              <Card.Root link={`curso/${course.id}`}>
                <Card.Image image={course.image.src} width="240" height="320">
                  <Card.Title title={course.title} />
                </Card.Image>
                <Card.Content description={course.hours}>
                  <Card.Icon icon={Clock4} />
                </Card.Content>
                <Card.Content description={course.category}>
                  <Card.Icon icon={User} />
                </Card.Content>
                <Card.Content description={course.calender}>
                  <Card.Icon icon={Calendar} />
                </Card.Content>
              </Card.Root>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </section>
  )
}
