import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { BsFacebook } from 'react-icons/bs'
import { FaInstagram, FaLinkedin } from 'react-icons/fa'
import { FaXTwitter } from 'react-icons/fa6'
import logo from '../../../public/images/logo_sobre_negro.png'
import logotipo from '../../../public/images/logotipo.svg'

export function Footer() {
  const { t } = useTranslation()

  return (
    <div className="flex flex-col justify-between w-full bg-black lg:px-40 lg:pt-12 lg:pb-8 p-6 text-white">
      <div className="flex lg:flex-row gap-8 lg:justify-between flex-col lg:text-left text-center lg:mt-0 mt-8">
        <div className="flex justify-center items-center lg:items-start lg:flex-col lg:w-[280px] gap-3">
          <Image src={logo} alt="logo playleague" width={80} height={60} className="hidden lg:block" />
          <Image src={logo} alt="logo playleague" width={50} height={35} className="lg:hidden block" />
          <h4 className="font-sans text-primary-500 text-lg lg:text-2xl lg:block">Crea tu propia liga</h4>
        </div>
        <div className="lg:text-left">
          <ul className="flex flex-col gap-4">
            <li className="font-sans text-2xl">Ligas</li>
            <li className="cursor-pointer font-sans">Baloncesto</li>
            <li className="cursor-pointer font-sans">Fútbol</li>
            <li className="cursor-pointer font-sans">Pádel</li>
          </ul>
        </div>
        <div className="lg:text-left ">
          <ul className="flex flex-col gap-4">
            <li className="font-sans text-2xl">FAQ</li>
            <li className="cursor-pointer font-sans">Cómo empiezo</li>
            <li className="cursor-pointer font-sans">Cómo subir resultados</li>
            <li className="cursor-pointer font-sans">Cómo crear mis equipos</li>
          </ul>
        </div>
        <div className="lg:text-left ">
          <p className="font-sans text-2xl">Términos y condiciones</p>
        </div>
      </div>
      <div className="flex flex-col items-center lg:items-end my-4 lg:my-0">
        <div className="flex items-end w-[200px] lg:justify-between justify-evenly">
          <div className="flex items-center justify-center  rounded-full w-12 h-12">
            <BsFacebook size={25} />
          </div>
          <div className="flex items-center justify-center rounded-full w-12 h-12">
            <FaXTwitter size={25} />
          </div>
          <div className="flex items-center justify-center rounded-full w-12 h-12">
            <FaInstagram size={25} />
          </div>
          <div className="flex items-center justify-center rounded-full w-12 h-12">
            <FaLinkedin size={25} />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center lg:mt-6">
        <div className="flex items-center gap-2">
          <Image src={logotipo} alt="logotipo dmd" width={25} height={30} />
          <p className="text-xs text-neutral-300">Todos los derechos reservados. 2023</p>
        </div>
      </div>
    </div>
  )
}
