import { Suspense } from 'react';
import NotPermission from '~/layouts/exception/403';
import NotFound from '~/layouts/exception/404';
import routes from '~react-pages';

const Index = () => {
  const [navUserRows] = useModel(systemModel, (systemModel) => [systemModel.navUserRows]);

  const userRoutes = routes.map((route) => resolveRoute({ navRows: navUserRows, route, element: <NotPermission /> }));

  return (
    <Suspense
      fallback={
        <Row className="bg-theme-layout flex-center wh-full">
          <Spin />
        </Row>
      }
    >
      {navUserRows.length ? useRoutes(userRoutes) : <NotFound />}
    </Suspense>
  );
};

export default Index;