import type { ReactNode } from 'react'

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: ReactNode
  description?: ReactNode
  actions?: ReactNode
}) {
  return (
    // 2026-06-16 "nâng màu / bắt mắt hơn" (anh): bigger bolder title (text-lg
    // font-bold, was 15px semibold) + a taller brand gradient accent bar.
    // Toolbar/actions stay inline right. Props {title, description, actions}
    // unchanged.
    <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-3">
        {/* Brand accent bar — nhận diện #1F7DC1, đậm + cao hơn per-page. */}
        <span aria-hidden className="mt-1 h-6 w-1.5 shrink-0 rounded-full bg-gradient-to-b from-brand-400 via-brand-600 to-brand-800" />
        <div className="min-w-0">
          <h1 className="text-lg font-bold leading-tight tracking-tight text-slate-900">{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>
  )
}
