'use client'
import { Section } from '@/components/ui/section'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'

import BG from '../../../public/not-found/BG.png'
import nums from '../../../public/not-found/404.png'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

interface Props {
  title: string
  subtitle: string
  btnText: string
}

export const MainSection: React.FC<Props> = ({ title, subtitle, btnText }) => {
  const router = useRouter()
  const pathname = usePathname()
  
  useEffect(() => {
    if (pathname !== '/404') {
      router.replace('/404')
    }
  }, [pathname, router])

  return (
    <>
      <Section sectionClass="relative h-[900px] flex-center">
        <Image src={BG} alt="" fill />
        <div className=" relative z-10 max-w-[684px] w-full flex flex-col items-center mx-auto">
          <div className="w-[283px] tablet:w-[400px] relative translate-y-[5px] z-10">
            <div className="w-full h-[70px] rounded-[484px] bg-[#D39E7F] blur-[165px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
            <Image src={nums} alt="" />
          </div>
          <div className="relative py-[40px] px-8  bg-transparent-beige rounded-[8px] backdrop-blur-[100px] gradient-border gradient-border--white text-center">
            <div className="absolute top-0 left-0 w-full h-[64px] rounded-full bg-[#221D1A] blur-[78px]" />
            <div className="absolute bottom-0 left-0 w-full h-[64px] rounded-full bg-[#221D1A] blur-[78px]" />

            <div className="flex flex-col items-center relative z-10 text-balance">
              <h2 className="subheadline-semibold tablet:h4 text-grey-50 mb-2">{title}</h2>
              <p className="b3-regular tablet:b2-regular text-grey-100 mb-6">{subtitle}</p>
              <Button asChild className="w-fit" variant={'primary'} sizes='btn-md'>
                <Link href="/">{btnText}</Link>
              </Button>
            </div>
          </div>
        </div>
      </Section>
    </>
  )
}
