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

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

import "./scss/root.scss";
import "./scss/components/footer.scss";

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

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

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

export default App;