import { Routes, Route, Navigate } from "react-router-dom"
import useStore from "./stores/useStore.js"
import { Toaster } from "react-hot-toast"
import { useEffect } from "react"

import Navbar from "./components/Navbar.jsx"
import HomePage from "./pages/HomePage.jsx"
import Login from "./pages/Login.jsx"
import Register from "./pages/Register.jsx"


function App() {
  const { checkAuth, logout, isAuthenticated, authUser } = useStore() 
  useEffect(() => {
    checkAuth()
  }, [])
  return (
    <div className="w-screen h-screen bg-gray-100">
      <Toaster />
      <Navbar isAuthenticated={isAuthenticated} authUser={authUser} logout={logout} />
      <Routes>
        <Route path="/home" element={isAuthenticated ? <HomePage /> : <Navigate to="/login" />} />
        <Route path="/login" element={!isAuthenticated ? <Login /> : <Navigate to="/home" />} />
        <Route path="/register" element={!isAuthenticated ? <Register /> : <Navigate to="/home" />} />
        <Route path="*" element={<Navigate to="/login" />} />
      </Routes>
    </div>
  )
}

export default App