"use client";

import { ReactNode, useEffect, useState } from "react";
import { AnimatePresence } from "motion/react";
import Loader from "./Loader";

const LOADING_DURATION = 1700;
const SEEN_KEY = "loader-seen";

export default function ClientWrapping({ children }: { children: ReactNode }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (sessionStorage.getItem(SEEN_KEY)) {
      setLoading(false);
      return;
    }
    sessionStorage.setItem(SEEN_KEY, "1");
    const timer = setTimeout(() => setLoading(false), LOADING_DURATION);
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      {children}
      <AnimatePresence>{loading && <Loader key="loader" />}</AnimatePresence>
    </>
  );
}