import { Dialog } from './dialog';
import { AlertTriangle } from 'lucide-react';

// FE-COMP-004: Add confirmation dialogs for destructive actions

export interface ConfirmationDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string; // Used by Dialog component internally
  variant?: 'default' | 'destructive';
  isLoading?: boolean;
}

/**
 * ConfirmationDialog - Composant réutilisable pour les confirmations d'actions destructives
 * FE-COMP-004: Add confirmation dialogs for destructive actions
 */
export function ConfirmationDialog({
  open,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel: _cancelLabel = 'Cancel', // Unused but kept for API compatibility
  variant = 'destructive',
  isLoading = false,
}: ConfirmationDialogProps) {
  const handleConfirm = () => {
    if (!isLoading) {
      onConfirm();
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={title}
      onConfirm={handleConfirm}
      confirmLabel={isLoading ? 'Processing...' : confirmLabel}
      onCancel={onClose}
      showCancel
    >
      <div className="space-y-4 py-4">
        <div className="flex items-start gap-4">
          {variant === 'destructive' && (
            <div className="flex-shrink-0">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
                <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
              </div>
            </div>
          )}
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </div>
    </Dialog>
  );
}
