import { type FC, type ReactNode } from 'react'
import Header from './Header'
import SideBar from './Sidebar'

type AppLayoutProps = {
  children: ReactNode
}

/**
 * Authenticated app shell: fixed header + sidebar, one scrollable main column.
 * Horizontal padding on the scrollport keeps content clear of the RTL scrollbar.
 */
const AppLayout: FC<AppLayoutProps> = ({ children }) => {
  return (
    <div className="box-border flex h-dvh flex-col overflow-hidden p-[var(--layout-frame)]">
      <Header />
      <SideBar />

      <div className="flex min-h-0 flex-1 flex-col pt-[var(--layout-header-stack)] xl:ms-[var(--layout-main-offset)] xl:pt-[var(--layout-header-stack-xl)]">
        <main className="app-main min-h-0 flex-1 overflow-y-auto overscroll-contain">
          <div className="min-w-0 px-[var(--layout-content-pad-x)] pb-28 xl:pb-16">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}

export default AppLayout