import type { ReactNode } from 'react'
import { PageHeader } from './PageHeader'

interface Props {
  title: string
  description?: string
  actions?: ReactNode
  children: ReactNode
  footer?: ReactNode
}

/** Fullheight list-page layout: sticky top bar + scrollable content + optional sticky footer (pagination). */
export function ListPageShell({ title, description, actions, children, footer }: Props) {
  return (
    <div className="flex flex-col h-full">
      <PageHeader variant="bar" title={title} description={description} actions={actions} />
      <div className="flex-1 min-h-0 p-3 sm:p-4">{children}</div>
      {footer && (
        <div className="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 sm:px-4 py-2">
          {footer}
        </div>
      )}
    </div>
  )
}
