import { Route, Routes } from "react-router-dom";
import { routes, AppRoute } from "./routes";
import AuthRoute from "./auth.tsx";
import { Suspense } from "react";
import { DotLoading } from "antd-mobile";

/**
 * 渲染路由
 * @constructor RenderRoutes
 */
export const RenderRoutes = () => {
  const renderRoutes = (routes: AppRoute[]) => {
    return routes.map((route) => (
      <Route
        key={route.path}
        path={route.path}
        element={
          <AuthRoute auth={route.auth} path={route.path} meta={route.meta}>
            {route.element}
          </AuthRoute>
        }
      >
        {route.children && renderRoutes(route.children)}
      </Route>
    ));
  };

  return (
    <Suspense
      fallback={
        <div
          style={{
            height: "100%",
            width: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: "24px",
          }}
        >
          <DotLoading />
        </div>
      }
    >
      <Routes>{renderRoutes(routes)}</Routes>
    </Suspense>
  );
};