import { Fragment, Suspense } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import LoginPage from "../Auth";
import Loader from "../Layout/Loader";
import { AUTH_ROUTES } from "./AuthRoutes";
import LayoutRoutes from "./LayoutRoutes";
import PrivateRoute from "./PrivateRoute";

const App = () => {
  const login = localStorage.getItem("login");

  return (
    <BrowserRouter basename={"/"}>
      <Suspense fallback={<Loader />}>
        <Routes>
          {login ? (
            <>
              <Route path={`${process.env.PUBLIC_URL}`} element={<Navigate to={`${process.env.PUBLIC_URL}/dashboard/default`} />} />
              <Route path={`/`} element={<Navigate to={`${process.env.PUBLIC_URL}/dashboard/default`} />} />
            
          ) : (
            ""
          )}
          <Route path={"/"} element={<PrivateRoute />}>
            <Route path="/*" element={<LayoutRoutes />} />
          </Route>
          {AUTH_ROUTES.map(({ path, element }, i) => (
            <Route path={path} element={element} key={i} />
          ))}
          <Route path={`${process.env.PUBLIC_URL}/login`} element={<LoginPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};