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

export function PageHeader({ eyebrow, title, description, action }: PageHeaderProps) {
  return (
    <div
      className={`animate-fade-in flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between ${description ? "mb-5" : "mb-4"}`}
    >
      <div>
        {eyebrow && <p className="page-eyebrow mb-1.5">{eyebrow}</p>}
        <h1 className="page-title">{title}</h1>
        {description && <p className="page-lead">{description}</p>}
      </div>
      {action && <div className="w-full shrink-0 sm:w-auto">{action}</div>}
    </div>
  );
}