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

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

  return (
    <div className="mb-7">
      <div className="w-full lg:grid lg:grid-cols-2 justify-center">
        <div className="w-full">
          <Image src={basketDunk} alt="check icon" sizes="100vw" style={{ width: '100%', height: 'auto' }} />
        </div>
        <div className="flex flex-col justify-center bg-black gap-8 pb-6">
          <div className="flex flex-col lg:gap-8 gap-4 md:mr-60">
            <div className="lg:pl-0 lg:pr-0 pl-6 pr-24">
              <h5 className="font-roboto leading-tight text-colorTextGrey-500 font-bold tracking-wide md:text-5xl text-2xl">
                Cualquier deporte, cualquier disciplina.
              </h5>
            </div>
            <div className="lg:pl-0 lg:pr-0 pl-6">
              <p className="font-DMSans text-base text-colorTextGrey-500 leading-5 ">
                Y participa o simplemente sigue tu liga y tus equipos favoritos
              </p>
            </div>
            <div className="w-full bottom-0 flex justify-end lg:justify-start gap-2 pr-5">
              <Button
                className="flex h-full lg:w-[170px] w-[130px] justify-center whitespace-nowrap border rounded-[50px] border-primary-500 py-1 px-8 lg:py-[10px] lg:px-5 bg-primary-500 "
                buttonClassName="text-black font-bold	 lg:text-base text-sm"
                onClick={() => {
                  router.push('/register')
                }}
              >
                Regístrate
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
