import type { ReactNode } from 'react'

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: ReactNode
  description?: ReactNode
  actions?: ReactNode
}) {
  return (
    // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
    // tighter bottom rule. Toolbar/actions sit inline on the right.
    <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
      <div className="flex min-w-0 items-start gap-2.5">
        {/* Brand accent bar — nhận diện #1F7DC1 per-page (mirror fe-user S58) */}
        <span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
        <div className="min-w-0">
          <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
          {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
        </div>
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </div>
  )
}