interface PageShellProps {
  title: string
  subtitle?: string
  badge?: string
  wide?: boolean
  children: React.ReactNode
}

export default function PageShell({ title, subtitle, badge, wide, children }: PageShellProps) {
  return (
    <div className={`ui-animate-in ${wide ? 'ui-page-wide' : 'ui-page'}`}>
      <header className="mb-8">
        {badge && <div className="ui-badge mb-3 w-fit">{badge}</div>}
        <h1 className="ui-hero-title">{title}</h1>
        {subtitle && <p className="ui-hero-sub">{subtitle}</p>}
      </header>
      {children}
    </div>
  )
}
