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

export default function PageHeader({ title, description, action }: Props) {
    return (
        <div className="flex items-center justify-between">
            <div>
                <h2 className="pf-display text-foreground text-2xl font-bold">
                    {title}
                </h2>
                {description && (
                    <p className="text-muted-foreground mt-1 text-sm">
                        {description}
                    </p>
                )}
            </div>
            {action && <div>{action}</div>}
        </div>
    );
}