import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import { Impressions } from "./components/Impressions";
import { Header } from "./components/Header";
import { Login } from "./components/Login";
import { PrivateRoute } from "./components/routes/PrivateRoute";
import { LoginRedirect } from "./components/routes/LoginRedirect";
import NotFound from "./components/NotFound";

function App() {
  const session = localStorage.getItem("session");
  return (
    <section className="body">
      <Header />
      <div className="App">
        <div className="impressions-container">
          <header>
            <div className="containerHeader lineSeparator">
              <h3 className="impressions-title">IMPRESIONES</h3>
              <h3 className="impressions-title ">{session}</h3>
            </div>
          </header>

          <BrowserRouter>
            <Routes>
              <Route
                path="/"
                element={
                  <PrivateRoute>
                    <Impressions />
                  </PrivateRoute>
                }
              ></Route>

              <Route
                path="/Login"
                element={
                  <LoginRedirect>
                    <Login />
                  </LoginRedirect>
                }
              ></Route>

              <Route path="*" element={<NotFound />} />
            </Routes>
          </BrowserRouter>
          <div className="img"></div>
        </div>
      </div>
    </section>
  );
}

export default App;
//IO
