import { Outlet } from "react-router-dom";
import { isMobile } from "react-device-detect";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useEffect } from "react";
import useModal from "../../../store/useModal";
import DesktopHeader from "./DesktopHeader";
import MobileHeader from "./MobileHeader";
import useFullScreen from "../../../store/useFullScreen";

const Layout = () => {
  const { modal } = useModal();
  const { setOnFullscreen } = useFullScreen();
  const onFullscreenHandle = useFullScreenHandle();

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

  return (
    <>
      <FullScreen handle={onFullscreenHandle}>
        {isMobile ? <MobileHeader /> : <DesktopHeader />}
        {modal}
        <Outlet />
      </FullScreen>
    </>
  );
};

export default Layout;