import { useState } from 'react';
import { AlertTriangle } from 'lucide-react';

interface ConfirmDialogProps {
    title: string;
    message: string;
    confirmLabel?: string;
    cancelLabel?: string;
    loadingLabel?: string;
    variant?: 'danger' | 'default';
    onConfirm: () => void | Promise<void>;
    onCancel: () => void;
}

export default function ConfirmDialog({
    title,
    message,
    confirmLabel = 'Confirm',
    cancelLabel = 'Cancel',
    loadingLabel,
    variant = 'default',
    onConfirm,
    onCancel,
}: ConfirmDialogProps) {
    const [loading, setLoading] = useState(false);

    const handleConfirm = async () => {
        setLoading(true);
        try {
            await onConfirm();
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="modal-backdrop" onClick={onCancel}>
            <div className="glass-panel modal confirm-dialog" onClick={e => e.stopPropagation()}>
                <div className="confirm-dialog-header">
                    <div className={`confirm-dialog-icon ${variant === 'danger' ? 'confirm-dialog-icon--danger' : ''}`}>
                        <AlertTriangle size={24} />
                    </div>
                    <h3 className="modal-title" style={{ margin: 0 }}>{title}</h3>
                </div>
                <p className="confirm-dialog-message">{message}</p>
                <div className="modal-actions">
                    <button
                        type="button"
                        className="btn btn-secondary"
                        onClick={onCancel}
                        disabled={loading}
                    >
                        {cancelLabel}
                    </button>
                    <button
                        type="button"
                        className={`btn ${variant === 'danger' ? 'btn-danger' : 'btn-primary'}`}
                        onClick={handleConfirm}
                        disabled={loading}
                    >
                        {loading ? (loadingLabel || `${confirmLabel}...`) : confirmLabel}
                    </button>
                </div>
            </div>
        </div>
    );
}
