interface BulkActionBarProps {
    selectedCount: number;
    onAssign: () => void;
    onWhatsApp: () => void;
    onMarkSpam: () => void;
    onDeselect: () => void;
}

export const BulkActionBar = ({ selectedCount, onAssign, onWhatsApp, onMarkSpam, onDeselect }: BulkActionBarProps) => {
    if (selectedCount === 0) return null;

    const buttonBase = 'rounded-lg px-3 py-1.5 text-xs font-semibold border-none cursor-pointer transition duration-100 ease-linear';

    return (
        <div className="flex items-center gap-3 rounded-xl bg-brand-section p-3 text-white">
            <span className="text-sm font-semibold">{selectedCount} leads selected</span>

            <div className="ml-auto flex gap-2">
                <button
                    type="button"
                    onClick={onAssign}
                    className={`${buttonBase} bg-white/20 text-white hover:bg-white/30`}
                >
                    Assign to Call Center
                </button>
                <button
                    type="button"
                    onClick={onWhatsApp}
                    className={`${buttonBase} bg-success-solid text-white hover:bg-success-solid/90`}
                >
                    Send WhatsApp
                </button>
                <button
                    type="button"
                    onClick={onMarkSpam}
                    className={`${buttonBase} bg-white/15 text-error-primary hover:bg-white/25`}
                >
                    Mark Spam
                </button>
                <button
                    type="button"
                    onClick={onDeselect}
                    className={`${buttonBase} bg-white/10 text-white/70 hover:bg-white/20 hover:text-white`}
                >
                    Deselect
                </button>
            </div>
        </div>
    );
};
