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 { NavLinkCategory } from './nav-link-category'

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 />
        </div>
        <ul className="w-full flex justify-start xl:justify-center gap-6 overflow-x-auto">
          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
            <Link href="#">
              <div className="relative">
                <Image
                  src={ImageCoverCourse}
                  alt="Capa do curso"
                  className="object-cover rounded-lg w-full h-auto"
                />
                <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">Gestão em Saúde</span>
                </div>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Clock4 size={16} />
                <span className="text-sm">30 h / Curso rápido</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <User size={16} />
                <span className="text-sm">Estudante</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Calendar size={16} />
                <span className="text-sm">Início imediato</span>
              </div>
            </Link>
          </li>
          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
            <Link href="#">
              <div className="relative">
                <Image
                  src={ImageCoverCourse}
                  alt="Capa do curso"
                  className="object-cover rounded-lg w-full h-auto"
                />
                <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">Gestão em Saúde</span>
                </div>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Clock4 size={16} />
                <span className="text-sm">30 h / Curso rápido</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <User size={16} />
                <span className="text-sm">Estudante</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Calendar size={16} />
                <span className="text-sm">Início imediato</span>
              </div>
            </Link>
          </li>
          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
            <Link href="#">
              <div className="relative">
                <Image
                  src={ImageCoverCourse}
                  alt="Capa do curso"
                  className="object-cover rounded-lg w-full h-auto"
                />
                <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">Gestão em Saúde</span>
                </div>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Clock4 size={16} />
                <span className="text-sm">30 h / Curso rápido</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <User size={16} />
                <span className="text-sm">Estudante</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Calendar size={16} />
                <span className="text-sm">Início imediato</span>
              </div>
            </Link>
          </li>
          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
            <Link href="#">
              <div className="relative">
                <Image
                  src={ImageCoverCourse}
                  alt="Capa do curso"
                  className="object-cover rounded-lg w-full h-auto"
                />
                <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">Gestão em Saúde</span>
                </div>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Clock4 size={16} />
                <span className="text-sm">30 h / Curso rápido</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <User size={16} />
                <span className="text-sm">Estudante</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Calendar size={16} />
                <span className="text-sm">Início imediato</span>
              </div>
            </Link>
          </li>
          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
            <Link href="#">
              <div className="relative">
                <Image
                  src={ImageCoverCourse}
                  alt="Capa do curso"
                  className="object-cover rounded-lg w-full h-auto"
                />
                <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">Gestão em Saúde</span>
                </div>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Clock4 size={16} />
                <span className="text-sm">30 h / Curso rápido</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <User size={16} />
                <span className="text-sm">Estudante</span>
              </div>
              <div className="flex items-center gap-2 p-2">
                <Calendar size={16} />
                <span className="text-sm">Início imediato</span>
              </div>
            </Link>
          </li>
        </ul>
        <Button variant="secondary" className="uppercase mx-auto my-8" asChild>
          <Link href="#">Ver todos os cursos</Link>
        </Button>
      </div>
    </section>
  )
}
