import { useState } from "react";
import { Outlet } from "react-router-dom";

import Navbar from "./components/navbar";
import Footer from "./components/footer";
import { GameTick } from "./components/GameTick";
import { GameSync } from "./components/GameSync";
import { OfflineReport } from "./components/OfflineReport";

import navData from "./data/NavBarData.json";

function App() {
  const [toggleRain, setToggleRain] = useState(false);

  return (
    <>
      <GameTick />
      <GameSync />
      <OfflineReport />
      <Navbar
        navData={navData}
        toggleRain={toggleRain}
        setToggleRain={setToggleRain}
      />
      <main>
        <Outlet context={[toggleRain, setToggleRain]} />
      </main>
      <Footer />
    </>
  );
}

export default App;