import { BottomNav } from './bottom-nav'

export function PageShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen pb-24">
      <main className="mx-auto max-w-2xl px-4 safe-top">{children}</main>
      <BottomNav />
    </div>
  )
}

export function PageHeader({
  title,
  action,
  back,
}: {
  title: React.ReactNode
  action?: React.ReactNode
  back?: React.ReactNode
}) {
  return (
    <div className="flex items-center justify-between gap-3 mb-4">
      <div className="flex items-center gap-2 min-w-0">
        {back}
        {typeof title === 'string' ? (
          <h1 className="text-2xl font-bold tracking-tight truncate">{title}</h1>
        ) : (
          title
        )}
      </div>
      {action}
    </div>
  )
}