import { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider, useAuth } from "./components/AuthContext";
import ProtectedRoute from "./components/ProtectedRoute";

import Landing from "./pages/Landing";
import Dashboard from "./pages/Dashboard"
import LoginModal from "./components/LoginModal";
import Navigation from "./components/Navigation";

export default function App() {
  // const [token] = useState(localStorage.getItem("token"));
  // const [showLogin, setShowLogin] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
    // const {token, logout } = useAuth();

  // useEffect(() => {
  //   if (token) {
  //     // setShowLogin(false);
  //     setModalOpen(false);
  //   }
  // }, [token]);


  // if (!token)
    return (
    <AuthProvider>
          <BrowserRouter>
            <Navigation  onLogin={() => setModalOpen(true)}  />
            <LoginModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
            
            <Routes>
              <Route path="/" element={<Landing onLogin={() => setModalOpen(true)} />} />
              {/* <Route path="/signup" element={<SignUp/>} /> */}

              <Route path="/dashboard" element={ <ProtectedRoute><Dashboard /></ProtectedRoute>   } />
            </Routes>
          </BrowserRouter>
        </AuthProvider>



      // <>
      //   <Landing onLogin={() => setShowLogin(true)} />
      //   {showLogin && <LoginModal onSuccess={setToken} />}
      // </>
    );

  // return <Dashboard />;
}
