import Icon, { DesktopOutlined } from '@ant-design/icons'
import { AdminRouterItem } from "../../router";
import React, { Suspense } from 'react';
import WeComIcon from "@src/assets/images/publishContent/wxCom.svg?react";
import WeGZHIcon from "@src/assets/images/publishContent/wxGzh.svg?react";
import LogoIcon from "@src/assets/images/login/logo.svg?react";
import { Outlet } from "react-router-dom";

// Lazy load components
const WeCom = React.lazy(() => import('./weCom/index'));
const WeGZH = React.lazy(() => import('./weGZH/index'));

// 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: 'publishContent',
		element: <Outlet />,
		meta: {
			label: "发布内容管理",
			title: "发布内容管理",
			key: "/publishContent",
			icon: <DesktopOutlined />,
		},
		children: [
			{
				path: 'wegzh',
				element: <LazyComponent Component={WeGZH} />,
				meta: {
					label: "公众号",
					title: "公众号",
					key: "/publishContent/wegzh",
					icon: <Icon component={WeGZHIcon} className="!text-[20px]" />,
				}
			},
			{
				path: 'wecom',
				element: <LazyComponent Component={WeCom} />,
				meta: {
					label: "企微",
					title: "企微",
					key: "/publishContent/wecom",
					icon: <Icon component={WeComIcon} className="!text-[20px]"/>,
				}
			},
		]
	}
]

export default demoRoutes