import Image from 'next/image'

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

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 text-gray-50">
          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
            <Link href="#" className="flex flex-col gap-4 p-2">
              <Image
                src={ImageFast}
                alt="Rápido"
                className="rounded-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-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
            <Link href="#" className="flex flex-col gap-4 p-2">
              <Image
                src={ImageDeepen}
                alt="Aprofundamento"
                className="rounded-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-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
            <Link href="#" className="flex flex-col gap-4 p-2">
              <Image
                src={ImageCorporate}
                alt="Corporativos"
                className="rounded-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>
  )
}
