import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import useStore from "../store/store";

const Layout = () => {
  const { loader, setOnFullscreen, modal } = useStore();
  const onFullscreenHandle = useFullScreenHandle();

  useEffect(() => {
    setOnFullscreen(onFullscreenHandle);
  }, []);

  return (
    <FullScreen handle={onFullscreenHandle}>
      {modal}
      {loader}
      <Outlet />
    </FullScreen>
  );
};

export default Layout;