import './App.css';
import "leaflet/dist/leaflet.css"
import "./../node_modules/bootstrap/dist/css/bootstrap.min.css"
import Navbar from "./Components/Navbar"
import Footer from "./Components/footer"
import AccountCreation from './Components/signup/AccountCreation';
import Home from "./Components/Home"
import Login from './Components/login/Login';
import ProfilePage from './Components/ProfilePage';
import FAQ from "./Components/FAQ/faq";
import Visit from "./Components/Visit"
import Explore from "./Components/Explore"
import UserProfile from "./Components/UserProfile"
import Rating from "./Components/Rating"

import { MapContainer, TileLayer} from "react-leaflet"
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Blog from './Components/Blog';
import Chatbox from './Components/Chatbox/Chatbox';

function App() {
  const isLoggedIn = JSON.parse(localStorage.getItem("keepLoggedIn"));
  return (
    <Router>
      <div className="main-content">

        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={isLoggedIn?<Navigate to={"/"}/>:<Home />} />
          <Route path="/visit" element={<Visit />} />
          <Route path="/accountcreation" element={<AccountCreation />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="/FAQ" element={<FAQ />} />
          <Route path="/explore" element={<Explore />} />
          <Route path="/profile/:username" element={<UserProfile />} />
          <Route path="/review" element={<Rating />} />
        </Routes>
        <Chatbox/>
      </div>
    </Router>
  );
}

export default App;