import { Outlet } from 'react-router-dom'
import { Header } from './Header'
import { Sidebar } from './Sidebar'
import { BottomTabBar } from './BottomTabBar'

export function AppShell() {
  return (
    <div className="flex flex-col h-screen overflow-hidden bg-[var(--c-surface-muted)]">
      {/* Top header — full width, always visible */}
      <Header />

      <div className="flex flex-1 overflow-hidden">
        {/* Desktop sidebar */}
        <Sidebar className="hidden md:flex flex-col" />

        {/* Main content */}
        <main
          id="main-content"
          className="flex-1 overflow-y-auto pb-14 md:pb-0"
          tabIndex={-1}
        >
          <Outlet />
        </main>
      </div>

      {/* Mobile bottom tab bar */}
      <BottomTabBar className="md:hidden" />
    </div>
  )
}