import Icon, { SettingOutlined } from '@ant-design/icons'
import { AdminRouterItem } from "../../router/index.tsx";
import React, { Suspense } from 'react';
import LogoIcon from "@src/assets/images/login/logo.svg?react";

// Lazy load components
const Setting = React.lazy(() => import('./setting.tsx'));

// Loading fallback component
// eslint-disable-next-line react-refresh/only-export-components
const LazyLoadingFallback = () => (
  <div className="flex items-center justify-center flex-col h-[50vh]">
		<Icon component={LogoIcon} className="text-[50px] opacity-50" />
		<div className="text-gray-500 text-xl">加载中</div>
  </div>
);

// Wrapper component with Suspense
// eslint-disable-next-line react-refresh/only-export-components
const LazyComponent = ({ Component }: { Component: React.ComponentType<any> }) => (
  <Suspense fallback={<LazyLoadingFallback />}>
    <Component />
  </Suspense>
);

const demoRoutes: AdminRouterItem[] = [
  {
		path: 'setting',
		element: <LazyComponent Component={Setting} />,
		sortKey: 5,
		meta: {
			label: "设置",
			title: "设置",
			key: "/setting",
			icon: <SettingOutlined />,
		},
	}
]

export default demoRoutes