import { ReactNode } from 'react'
import { Header } from './Header'
import { Sidebar } from './Sidebar'
import { useAppStore } from '@/stores/useAppStore'
import { clsx } from 'clsx'

interface LayoutProps {
  children: ReactNode
}

export function Layout({ children }: LayoutProps) {
  const sidebarOpen = useAppStore((s) => s.sidebarOpen)
  const darkMode = useAppStore((s) => s.darkMode)

  return (
    <div className={clsx('min-h-screen', darkMode && 'dark')}>
      <div className="flex min-h-screen bg-gray-50 dark:bg-gray-900">
        {/* 侧边栏 */}
        <Sidebar />

        {/* 主内容区 */}
        <div className="flex flex-1 flex-col">
          {/* 顶部导航 */}
          <Header />

          {/* 页面内容 */}
          <main
            className={clsx(
              'flex-1 p-6 transition-all duration-300',
              sidebarOpen ? 'lg:ml-64' : 'lg:ml-20'
            )}
          >
            {children}
          </main>
        </div>
      </div>
    </div>
  )
}
