import HomePage from "./components/HomePage";
import NavBar from "./components/NavBar";
import NavBarMain from "./components/NavBarMain";
import SideMenu from "./components/SideMenu"; // New side menu component
import { Routes, Route } from "react-router-dom";
import { useState } from 'react';

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Function to toggle the side menu
  const handleMenuToggle = () => {
    setIsMenuOpen(prevState => !prevState);
  };

  return (
    <div id="appcontainer" className="flex flex-row w-full h-full bg-black">
      <div
        id="navbarcontainer"
        className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shadow-lg shadow-blue-900/50"
      >
        <NavBar />
      </div>

      <div id="maincontainer" className="w-full lg:w-5/6 bg-gray-950/50 flex flex-col">
        <div
          id="navbarmaincontainer"
          className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 shadow-md shadow-blue-900/35 sticky top-0 z-10"
        >
          <NavBarMain handleMenuToggle={handleMenuToggle} />
        </div>

        <div id="maincontentcontainer" className="w-full grow">
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </div>
      </div>

      <SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} /> {/* Pass setIsMenuOpen as a prop */}
    </div>
  );
}

export default App;