import Link from 'next/link'
import Image from 'next/image'

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

import ImageCoverCourse from '../../public/images/cover-course.png'
import banner from '../../public/images/banner.png'
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
}
console.log(ImageCoverCourse)
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 Saúde',
    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 className="w-full flex justify-center">
          <CarouselContent className="flex gap-2">
            {coursesCard.map((course) => (
              <CarouselItem
                key={course.id}
                className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 bg-green-50 max-w-[240px] pl-0 rounded-lg ml-4"
              >
                <Link href="#">
                  <div className="relative">
                    <Image
                      src={course.image.src}
                      width={240}
                      height={320}
                      alt="Capa do curso"
                      className="object-cover rounded-lg w-[240px] h-[320px]"
                    />
                    <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
                      <span className="pb-8 text-2xl">{course.title}</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 p-2">
                    <Clock4 size={16} />
                    <span className="text-sm">{course.hours}</span>
                  </div>
                  <div className="flex items-center gap-2 p-2">
                    <User size={16} />
                    <span className="text-sm">{course.category}</span>
                  </div>
                  <div className="flex items-center gap-2 p-2">
                    <Calendar size={16} />
                    <span className="text-sm">{course.calender}</span>
                  </div>
                </Link>
              </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>
  )
}
