import { ReactNode } from 'react'

export default function PageHeader({
  title,
  subtitle,
  children
}: {
  title: string
  subtitle?: string
  children?: ReactNode
}): JSX.Element {
  return (
    <header className="flex items-center justify-between border-b border-border px-6 py-4">
      <div>
        <h1 className="text-lg font-semibold text-ink">{title}</h1>
        {subtitle && <p className="text-sm text-muted">{subtitle}</p>}
      </div>
      <div className="flex items-center gap-2">{children}</div>
    </header>
  )
}
