import type { ReactNode } from 'react'

import { Footer } from './Footer'
import { Header } from './Header'

/**
 * The public page frame: header, content, footer.
 *
 * A skip link comes first so keyboard and screen-reader users are not forced
 * through the whole navigation on every page.
 */
export function AppShell({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-dvh flex-col bg-canvas">
      <a
        href="#main"
        className="sr-only-focusable fixed top-3 left-3 z-50 rounded-md bg-accent px-4 py-2 text-sm font-medium text-white"
      >
        Skip to content
      </a>

      <Header />

      <main id="main" className="flex-1">
        {children}
      </main>

      <Footer />
    </div>
  )
}
