'use client'
// src/components/shell/AppShell.tsx
// Input: children ReactNode
// Output: full app layout — fixed sidebar 220px + topbar 52px + scrollable main
// Rationale: consumed by page layouts to wrap content in the shell

import { Sidebar } from './Sidebar'
import { Topbar } from './Topbar'

interface AppShellProps {
  children: React.ReactNode
  topbarContent?: React.ReactNode
}

export function AppShell({ children, topbarContent }: AppShellProps) {
  return (
    <div className="min-h-screen bg-bg-base">
      <Sidebar />
      <Topbar>{topbarContent}</Topbar>
      <main
        className="
          ml-[220px] mt-[52px]
          min-h-[calc(100vh-52px)]
          grid-bg
          overflow-y-auto
        "
      >
        <div className="p-6">
          {children}
        </div>
      </main>
    </div>
  )
}