interface PageHeaderProps {
    title: string;
    description: string;
    actionLabel: string;
    onAction: () => void;
}

export default function PageHeader({ title, description, actionLabel, onAction }: PageHeaderProps) {
    return (
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">
                    {title}
                </h1>
                <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                    {description}
                </p>
            </div>
            <button
                onClick={onAction}
                className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
                style={{ background: 'var(--gradient)' }}
            >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                {actionLabel}
            </button>
        </div>
    );
}