import { Outlet } from "react-router";
import { Toaster } from "sonner";
import { BottomNav } from "~/components/bottom-nav";
import { FullscreenProvider, useFullscreen } from "~/hooks/use-fullscreen";

function LayoutInner() {
  const { isFullscreen } = useFullscreen();

  return (
    <div className="flex flex-col h-dvh">
      <div className="flex-1 overflow-hidden">
        <Outlet />
      </div>
      {!isFullscreen && <BottomNav />}
      <Toaster position="top-center" richColors />
    </div>
  );
}

export default function Layout() {
  return (
    <FullscreenProvider>
      <LayoutInner />
    </FullscreenProvider>
  );
}