'use client'

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

import { getCourses } from '@/api/courses'
import { useQuery } from '@tanstack/react-query'
import { Card } from './card'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from './ui/carousel'

export function CarouselComponent() {
  const { data: courses } = useQuery({
    queryKey: ['courses'],
    queryFn: getCourses,
  })

  return (
    <section>
      <Carousel>
        {courses ? (
          <CarouselContent>
            {courses.data.slice(0, 10).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.mobileBanner || ''}
                    width={240}
                    height={320}
                  >
                    <Card.Title title={course.name} />
                  </Card.Image>
                  <Card.Content
                    description={`${String(course.workload)} horas`}
                  >
                    <Card.Icon icon={Clock4} />
                  </Card.Content>
                  <Card.Content description={course?.audience?.name || ''}>
                    <Card.Icon icon={User} />
                  </Card.Content>
                  <Card.Content description={course?.category?.name || ''}>
                    <Card.Icon icon={Calendar} />
                  </Card.Content>
                </Card.Root>
              </CarouselItem>
            ))}
          </CarouselContent>
        ) : (
          <p>Não há cursos disponíveis</p>
        )}
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </section>
  )
}
