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'

export function Courses() {
  return (
    <section className="py-10">
      <div className="container flex flex-col">
        <ul className="flex flex-wrap justify-center items-center gap-8">
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Tecnologia</Link>
            </Button>
          </li>
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Negócios</Link>
            </Button>
          </li>
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Saúde</Link>
            </Button>
          </li>
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Educação</Link>
            </Button>
          </li>
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Comunicação</Link>
            </Button>
          </li>
          <li>
            <Button asChild className="uppercase">
              <Link href="#">Teologia</Link>
            </Button>
          </li>
        </ul>
        <div className="flex justify-center items-center w-1/2 mx-auto my-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>
      </div>
    </section>
  )
}
