import { Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import "./assets/base.less";
import Nav from "./components/Nav";
import { commonRouters, lazyRouters } from "./router";
import { Guard } from "./router/Guard";
import { Toaster } from "react-hot-toast";
import Loading from "./components/Loading";

function App() {
  return (
    <>
      <Nav />
      <main>
        <Routes>
          {commonRouters.map((router) => (
            <Route
              key={router.path}
              path={router.path}
              element={<Guard>{router.element}</Guard>}
            />
          ))}
          {lazyRouters.map((router) => (
            <Route
              key={router.path}
              path={router.path}
              element={
                <Suspense fallback={<Loading />}>
                  <Guard>{<router.element />}</Guard>
                </Suspense>
              }
            />
          ))}
          <Route path="*" element={<span>404</span>} />
        </Routes>
      </main>
      <Toaster
        toastOptions={{
          style: {
            fontSize: 14,
          },
        }}
      />
    </>
  );
}

export default App;