import { createBrowserRouter } from 'react-router-dom';
import Layout from '../layout';
import { Suspense, lazy } from 'react';

const Home = lazy(() => import('../pages/home'));
const Setting = lazy(() => import('../pages/setting'));
const ShopList = lazy(() => import('../pages/shop-list'));
const Login = lazy(() => import('../pages/login'));

const fallbackEle = '加载中...';
const withSuspense = (ComP) => (
  <Suspense fallback={fallbackEle}>
    <ComP />
  </Suspense>
);

export const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: withSuspense(Home),
        breadcrumbName: '主页',
      },
      {
        path: '/setting',
        element: withSuspense(Setting),
        breadcrumbName: '设置',
      },
      {
        path: '/shop-list',
        element: withSuspense(ShopList),
        breadcrumbName: '商品列表',
      },
    ],
  },
  {
    path: '/login',
    element: withSuspense(Login),
  },
];

const router = createBrowserRouter(routes);

export default router;