import { Outlet } from 'react-router-dom'

import { AppHeader } from '@renderer/components/layout/AppHeader'
import { AppSidebar } from '@renderer/components/layout/AppSidebar'
import { ScrollArea } from '@renderer/components/ui/scroll-area'

export function AppLayout(): React.JSX.Element {
  return (
    <div className="grid h-screen min-w-0 grid-cols-[clamp(220px,20vw,248px)_minmax(0,1fr)] bg-background text-foreground max-[760px]:grid-cols-[76px_minmax(0,1fr)]">
      <AppSidebar />

      <section className="flex min-h-0 flex-col">
        <AppHeader />
        <ScrollArea className="min-h-0 flex-1">
          <main className="space-y-5 p-6 max-[760px]:p-4">
            <Outlet />
          </main>
        </ScrollArea>
      </section>
    </div>
  )
}
