import { Suspense } from 'react'
import { Outlet } from 'react-router-dom'
import { Spin } from 'antd'
import TopNavigation from './TopNavigation'
import ErrorBoundary from '../modules/ErrorBoundary'

/**
 * 主布局组件
 * 
 * @description
 * - 顶部导航栏
 * - 错误边界保护 ⭐ Week 2 Day 7 新增
 * - 懒加载支持（Suspense）
 * - 主内容区（Outlet）
 * 
 * @version Week 2 Day 7 - 任务17：集成错误边界
 */
const MainLayout = () => {
  return (
    <div className="h-screen flex flex-col overflow-hidden bg-gray-50">
      {/* 顶部导航 */}
      <TopNavigation />

      {/* 主内容区 - 添加错误边界保护 ⭐ */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <ErrorBoundary moduleName="主应用">
          <Suspense 
            fallback={
              <div className="flex-1 flex items-center justify-center">
                <Spin size="large" />
              </div>
            }
          >
            <Outlet />
          </Suspense>
        </ErrorBoundary>
      </div>
    </div>
  )
}

export default MainLayout