import { Spin } from "@arco-design/web-react";
import { Suspense } from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import "./assets/base.less";
import Nav from "./components/Nav";
import { commonRouters, lazyRouters } from "./router";
import { Guard } from "./router/Guard";

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={<Spin />}>
                  <Guard>{<router.element />}</Guard>
                </Suspense>
              }
            />
          ))}
          <Route path="*" element={<span>404</span>} />
        </Routes>
      </main>
    </>
  );
}

export default App;