import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

import Image from 'next/image';
import Link from 'next/link';
import { Modal } from '~/components/ui/modal';
import { getAuth } from '~/libs/auth';
import dynamic from 'next/dynamic';

const PagePopupInformation = () => {
  const router = useRouter();
  const isHomePage = router.pathname === '/';
  const auth = getAuth();
  const [active, setActive] = useState<boolean>(false);
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getData = async () => {
      const res = await fetch(`/api/hero-banner?type=popup-banner`);
      const { data } = await res.json();
      if (data) {
        setData(data);
      }
      setLoading(false);
    };

    if (isHomePage && !auth) {
      setActive(true);
      getData();
    }
  }, [isHomePage, auth]);
  return (
    <div className='group'>
      {data && !loading && (
        <Modal
          active={active}
          className='!w-fit !bg-transparent !border-none overflow-hidden'
          close={() => setActive(false)}
          mode='desktop'
        >
          <div
            className='w-[350px] md:w-[530px]'
            onClick={() => setActive(false)}
          >
            <Link
              href={data[0].url === false ? '/' : data[0].url}
              aria-label='popup'
            >
              <Image
                src={data[0]?.image}
                alt={data[0]?.name}
                width={1152}
                height={768}
                loading='eager'
                sizes='(max-width: 768px) 100vw, 50vw'
                priority={true}
              />
            </Link>
          </div>
        </Modal>
      )}
    </div>
  );
};

export default PagePopupInformation;