import type { ReactNode } from 'react';

/**
 * Standard list/detail page header (05-UI-UX §3): title + optional subtitle on
 * the left, primary action on the right.
 */
export function PageHeader({
    title,
    subtitle,
    action,
}: {
    title: string;
    subtitle?: string;
    action?: ReactNode;
}) {
    return (
        <div className="flex flex-wrap items-start justify-between gap-3">
            <div className="space-y-1">
                <h1 className="font-heading text-2xl font-semibold text-primary">
                    {title}
                </h1>
                {subtitle && (
                    <p className="text-sm text-muted-foreground">{subtitle}</p>
                )}
            </div>
            {action}
        </div>
    );
}