import { Button } from '@/components/atoms/Button'
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useRouter } from 'next/router'
import FondoVerdeHome from '../../../../public/images/FondoVerdeHome.svg'
// import VectorWhiteHome from '../../../../public/images/vectorWhiteHome.svg'
import whiteLogo from '../../../../public/images/whiteLogo.svg'

export function SectionHeaderHome() {
  const { t } = useTranslation()
  const router = useRouter()

  return (
    <div className="w-full relative flex justify-center items-center">
      <Image
        src={FondoVerdeHome}
        alt="Imagen deporte home"
        width={0}
        height={0}
        sizes="100vw"
        quality={100}
        // style={{ width: '100%', height: 'auto' }}
        className="w-full h-[500px] object-none md:object-cover md:h-full"
      />
      <div className="w-full flex flex-col items-center justify-center absolute py-8">
        <div className="lg:h-32 lg:w-44 h-20 w-20">
          <Image
            quality={100}
            src={whiteLogo}
            alt="Logo Liga"
            width={0}
            height={0}
            sizes="100vw"
            style={{ width: '100%', height: 'auto' }}
          />
        </div>
        <h4 className="uppercase text-white mt-4 text-base lg:text-2xl">League Ranks</h4>
        <h1 className="font-roboto text-white font-bold	mb-5 tracking-[4px]">Crea tu propia liga</h1>
        <h3 className="font-roboto text-white mb-11 text-base lg:text-3xl">
          Tu gestor de campeonatos y eventos deportivos.{' '}
        </h3>
        <div className="absolute bottom-0 flex gap-2 ">
          <Button
            className="flex h-full  w-[130px] md:w-[170px] justify-center whitespace-nowrap border rounded-[50px] border-white py-1 px-5 lg:py-[10px] lg:px-5 bg-terciary-500 "
            buttonClassName="text-white font-bold	 rounded-[50px] lg:text-base text-xs"
            onClick={() => {
              router.push('/login')
            }}
          >
            Ver resultados
          </Button>
          <Button
            className="flex h-full  w-[130px] md:w-[170px] justify-center whitespace-nowrap border  rounded-[50px]  border-primary-500 py-1 px-5 lg:py-[10px] lg:px-5 bg-primary-500 "
            buttonClassName="text-black font-bold	 lg:text-base text-xs"
            onClick={() => {
              router.push('/register')
            }}
          >
            Regístrate
          </Button>
        </div>
      </div>
      {/* <Image
        src={VectorWhiteHome}
        alt="Imagen deporte home"
        width={0}
        height={0}
        sizes="100vw"
        quality={100}
        style={{ width: '100%', height: 'auto', position: 'absolute', bottom: 0 }}
      /> */}
    </div>
  )
}
