import Link from 'next/link'

import { Calendar, Clock4, Search, User } from 'lucide-react'
import { Button } from './ui/button'
import { Input } from './ui/input'

import banner from '../../public/images/banner.png'
import ImageCoverCourse from '../../public/images/cover-course.png'
import { Card } from './card'
import { NavLinkCategory } from './nav-link-category'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from './ui/carousel'

type CoursesCardTypes = {
  id: string
  image: { src: string; width: number; height: number }
  title: string
  hours: string
  category: string
  calender: string
}

const coursesCard: CoursesCardTypes[] = [
  {
    id: '1',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '2',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '3',
    image: banner,
    title: 'Gestão em Projetos',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '4',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '5',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '6',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
]

export function Courses() {
  return (
    <section>
      <div className="container flex flex-col">
        <NavLinkCategory />
        <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
          <Input placeholder="O que você quer aprender hoje?" />
          <Search size={24} />
        </div>
        <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={`${course.category}/${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>
        <Button variant="secondary" className="uppercase mx-auto my-8" asChild>
          <Link href="#">Ver todos os cursos</Link>
        </Button>
      </div>
    </section>
  )
}
