interface IncidentActionButtonsProps {
    log: any;
    busyId: number | null;
    onInvestigate?: (log: any) => void;
    onAction: (incidentId: number, action: 'acknowledge' | 'resolve' | 'archive') => void;
    compact?: boolean;
}

export function IncidentActionButtons({
    log,
    busyId,
    onInvestigate,
    onAction,
    compact = false,
}: IncidentActionButtonsProps) {
    if (!log.incident_status) {
        return null;
    }

    const buttonClass = compact
        ? 'rounded-md border px-2 py-1 text-[9px] font-semibold transition disabled:opacity-50'
        : 'rounded-lg border px-2.5 py-1 text-[10px] font-semibold transition disabled:opacity-50';

    const status = log.incident_status;

    return (
        <div className="flex flex-wrap gap-1.5">
            {onInvestigate && (
                <button
                    type="button"
                    onClick={() => onInvestigate(log)}
                    className={`${buttonClass} border-slate-700/70 text-slate-300 hover:bg-slate-800`}
                >
                    Investigate
                </button>
            )}

            {status === 'open' && (
                <>
                    <button
                        type="button"
                        disabled={busyId === log.id}
                        onClick={() => onAction(log.id, 'acknowledge')}
                        className={`${buttonClass} border-orange-500/25 text-orange-300 hover:bg-orange-500/10`}
                    >
                        Acknowledge
                    </button>
                    <button
                        type="button"
                        disabled={busyId === log.id}
                        onClick={() => onAction(log.id, 'resolve')}
                        className={`${buttonClass} border-emerald-500/25 text-emerald-300 hover:bg-emerald-500/10`}
                    >
                        Resolve
                    </button>
                </>
            )}

            {status === 'acknowledged' && (
                <button
                    type="button"
                    disabled={busyId === log.id}
                    onClick={() => onAction(log.id, 'resolve')}
                    className={`${buttonClass} border-emerald-500/25 text-emerald-300 hover:bg-emerald-500/10`}
                >
                    Resolve
                </button>
            )}

            {status === 'resolved' && (
                <button
                    type="button"
                    disabled={busyId === log.id}
                    onClick={() => onAction(log.id, 'archive')}
                    className={`${buttonClass} border-slate-700/70 text-slate-300 hover:bg-slate-800`}
                >
                    Archive
                </button>
            )}
        </div>
    );
}