import { Outlet } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
import { useUIStore } from '@/stores/uiStore'
import { cn } from '@/lib/utils'

export function AppShell() {
  const { sidebarOpen } = useUIStore()

  return (
    <div className="min-h-screen bg-bg">
      <Sidebar />
      <div
        className={cn(
          'transition-all duration-200 ease-out',
          sidebarOpen ? 'lg:ml-[240px]' : 'lg:ml-[72px]'
        )}
      >
        <Header />
        <main className="p-6 lg:p-10">
          <Outlet />
        </main>
      </div>
    </div>
  )
}
