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';

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

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

    if (isHomePage && !auth) {
      setActive(true);
      // getData();
    }
  }, [isHomePage, auth]);
  return (
    <div className='group'>
      {data && (
        <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}
                sizes='(max-width: 768px) 100vw, 50vw'
                priority={true}
              />
            </Link>
          </div>
        </Modal>
      )}
    </div>
  );
};
export async function getServerSideProps() {
  const res = await fetch(`/api/hero-banner?type=popup-banner`);
  const { data } = await res.json();
  return { props: { data } };
}


export default PagePopupInformation;