import type { ReactNode } from 'react'

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: ReactNode
  description?: ReactNode
  actions?: ReactNode
}) {
  return (
    <div className="mb-6 flex items-start justify-between gap-6 border-b border-slate-200/70 pb-5">
      <div className="min-w-0">
        <h1 className="text-[22px] font-bold leading-tight text-slate-900">{title}</h1>
        {description && <p className="mt-1.5 text-[13px] leading-relaxed text-slate-500">{description}</p>}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </div>
  )
}
