import Image from 'next/image'

import ImageFast from '../../public/images/fast.png'
import ImageDeepen from '../../public/images/deepen.png'
import ImageCorporate from '../../public/images/corporate.png'
import Link from 'next/link'

export function CourseCategory() {
  return (
    <section className="hidden md:block">
      <div className="h-auto flex justify-center items-center my-20 px-6">
        <ul className="flex justify-center items-center gap-4">
          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
            <Link href="#" className="flex flex-col gap-4">
              <Image
                src={ImageFast}
                alt="Rápido"
                className="rounded-t-lg object-cover"
              />
              <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                Rápido
              </h4>
              <p className="text-center text-sm lg:text-base">
                Encontre o curso ideal para sua rotina etc
              </p>
            </Link>
          </li>
          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
            <Link href="#" className="flex flex-col gap-4">
              <Image
                src={ImageDeepen}
                alt="Aprofundamento"
                className="rounded-t-lg object-cover"
              />
              <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                Aprofundamento
              </h4>
              <p className="text-center text-sm lg:text-base">
                Encontre o curso ideal para sua rotina etc
              </p>
            </Link>
          </li>
          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
            <Link href="#" className="flex flex-col gap-4">
              <Image
                src={ImageCorporate}
                alt="Corporativos"
                className="rounded-t-lg object-cover"
              />
              <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                Corporativos
              </h4>
              <p className="text-center text-sm lg:text-base">
                Encontre o curso ideal para sua rotina etc
              </p>
            </Link>
          </li>
        </ul>
      </div>
    </section>
  )
}
