type PageHeaderProps = {
  eyebrow?: string;
  title: string;
  description: string;
  action?: React.ReactNode;
};

export function PageHeader({ eyebrow, title, description, action }: PageHeaderProps) {
  return (
    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div className="max-w-3xl">
        {eyebrow ? (
          <p className="section-label text-[var(--accent-primary)]">{eyebrow}</p>
        ) : null}
        <h1 className="mt-2 text-[24px] font-bold tracking-[-0.02em] text-[var(--text-primary)]">{title}</h1>
        <p className="mt-2 text-[14px] leading-relaxed text-[var(--text-secondary)]">{description}</p>
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}