import React, { Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Spin } from 'antd'
import MainLayout from '@/components/layout/MainLayout'

// 懒加载页面组件
const HomePage = React.lazy(() => import('@/pages/HomePage'))
const AboutPage = React.lazy(() => import('@/pages/AboutPage'))
const NotFoundPage = React.lazy(() => import('@/pages/NotFoundPage'))


// 加载中组件
const LoadingComponent = () => (
  <div style={{ padding: '20px', textAlign: 'center' }}>
    <Spin size="large" />
  </div>
)

const AppRouter: React.FC = () => {
  return (
    <Routes>
      <Route path="/" element={<MainLayout />}>
        <Route index element={<Navigate to="/home" replace />} />
        <Route
          path="home"
          element={
            <Suspense fallback={<LoadingComponent />}>
              <HomePage />
            </Suspense>
          }
        />
        <Route
          path="about"
          element={
            <Suspense fallback={<LoadingComponent />}>
              <AboutPage />
            </Suspense>
          }
        />
        {/* 捕获所有未匹配的路由 */}
        <Route path="*" element={<NotFoundPage />} />
      </Route>
    </Routes>
  )
}

export default AppRouter