import Image from 'next/image'

import { ChevronRight } from 'lucide-react'
import Link from 'next/link'
import imgFooter from '../../public/images/img-footer.svg'
import imgLogoFooter from '../../public/images/img-logo-footer.svg'
import LogoComponent from './logo'
import { Button } from './ui/button'

export function Footer() {
  return (
    <footer className="px-6 py-10 bg-green-700">
      <div className="container mx-auto flex gap-3 justify-center md:justify-between items-center">
        <div className="md:flex items-center justify-center gap-2 md:gap-6">
          <Image src={imgLogoFooter} alt="PRO" className="hidden md:flex" />
          <LogoComponent
            width={200}
            height={80}
            className="fill-gray-900 flex md:hidden"
          />
          <ul className="text-center md:text-start">
            <li>Plataforma de Cursos Livres</li>
            <li>HUB - Indústria Criativa</li>
            <li className="hidden md:flex">
              Centro de Ensino Superior Adventista no Sul do Brasil
            </li>
            <li className="flex">
              CNPJ 76.726.884/0003-90
              <span className="hidden lg:flex">
                &nbsp;| Vale do Ivaí - Ivatuba, PR
              </span>
            </li>
            <li className="hidden md:flex">
              CEP: 87130-000 | Caixa Postal - 28
            </li>
            <li className="hidden md:flex">Fone: (44) 3236-8000</li>
          </ul>
        </div>
        <nav className="py-8 hidden md:flex">
          <ul className="flex flex-col gap-4">
            <li>
              <Button asChild variant="link" className="uppercase p-0">
                <Link href="#">
                  Cursos rápidos{' '}
                  <ChevronRight className="text-yellow-100 ml-3" />
                </Link>
              </Button>
            </li>
            <li>
              <Button asChild variant="link" className="uppercase p-0">
                <Link href="#">
                  Cursos de aprofundamento
                  <ChevronRight className="text-yellow-100 ml-3" />
                </Link>
              </Button>
            </li>
            <li>
              <Button asChild variant="link" className="uppercase p-0">
                <Link href="#" className="flex items-center">
                  Cursos corporativos
                  <ChevronRight className="text-yellow-100 ml-3" />
                </Link>
              </Button>
            </li>
            <li>
              <Button asChild variant="link" className="uppercase p-0">
                <Link href="/login" className="flex items-center">
                  Área Administrativa
                  <ChevronRight className="text-yellow-100 ml-3" />
                </Link>
              </Button>
            </li>
          </ul>
        </nav>
        <Image
          src={imgFooter}
          alt="Educação Adventista"
          className="hidden md:flex"
        />
      </div>
    </footer>
  )
}
