import { Outlet } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
import { MobileNav } from './MobileNav'
import { OfflineIndicator } from '@/components/common/OfflineIndicator'
import { Toaster } from '@/components/ui/sonner'

/** 应用主布局:左 Sidebar + 顶部 Header + 内容区 */
export function AppLayout() {
  return (
    <div className="min-h-screen bg-[#f8f9fb]">
      <OfflineIndicator />
      <Sidebar />
      <div className="md:pl-60">
        <Header nav={<MobileNav />} />
        <main className="container mx-auto max-w-7xl px-4 py-6 md:px-6">
          <Outlet />
        </main>
      </div>
      <Toaster />
    </div>
  )
}