"use client"
import Image from "next/image";
import { icons } from "#/assets/icons";
import { ReactNode, useEffect, useState } from "react";

interface Props {
  name: string
  label: string
  timer: number,
}

export default function SplashScreen({ name, label, timer }: Props) {

  const [showSplash, setShowSplash] = useState(false);


  useEffect(() => {

    const timeout = setTimeout(() => setShowSplash(false), timer);

    if (typeof window !== undefined) {

      if (!sessionStorage.getItem('sessionInitialized')) {
        setShowSplash(true);
        // Set session
      } else {
        setShowSplash(false);
        //console.log('Session already exists');
      }
      const handleUnload = () => sessionStorage.removeItem('sessionInitialized')

      window.addEventListener("beforeunload", handleUnload);

      return () => {
        clearTimeout(timeout)
        handleUnload
      } // Clean up the timeout on unmount

    }

  }, [timer]);



  return (
    <>
      {showSplash &&
        <div className="splash-screen w-[100vw] h-[100vh] ">
          <div className="d-flex justify-content-center align-items-center gap-3">
            <Image
              src={icons.logo}
              alt="Private Docs"
              className="text-red-500 h-auto"
              height={48}
            />
            <p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
          </div>
        </div>

      }
    </>
  )
}