import React from 'react';
import { useTranslation } from 'react-i18next';

/**
 * ConfirmModal - Modal de confirmación personalizado
 * 
 * Props:
 * - show: boolean - Si el modal está visible
 * - onConfirm: function - Callback cuando se confirma
 * - onCancel: function - Callback cuando se cancela
 * - title: string - Título del modal (opcional)
 * - message: string - Mensaje de confirmación
 * - confirmText: string - Texto del botón confirmar (opcional)
 * - cancelText: string - Texto del botón cancelar (opcional)
 * - variant: string - 'danger' | 'warning' | 'primary' (opcional, default: 'danger')
 */
export default function ConfirmModal({ 
  show, 
  onConfirm, 
  onCancel, 
  title,
  message, 
  confirmText,
  cancelText,
  variant = 'danger'
}) {
  const { t } = useTranslation();

  if (!show) return null;

  const variantClass = {
    danger: 'btn-danger',
    warning: 'btn-warning',
    primary: 'btn-primary'
  }[variant] || 'btn-danger';

  const iconClass = {
    danger: 'bi-exclamation-triangle-fill text-danger',
    warning: 'bi-question-circle-fill text-warning',
    primary: 'bi-info-circle-fill text-primary'
  }[variant] || 'bi-exclamation-triangle-fill text-danger';

  return (
    <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)', zIndex: 100000 }}>
      <div className="modal-dialog modal-dialog-centered modal-sm">
        <div className="modal-content border-0" style={{ background: '#1e293b' }}>
          <div className="modal-body text-center py-4">
            <i className={`bi ${iconClass} mb-3`} style={{ fontSize: '3rem' }}></i>
            {title && <h5 className="text-white mb-3">{title}</h5>}
            <p className="text-slate-300 mb-4">{message}</p>
            <div className="d-flex gap-2 justify-content-center">
              <button 
                type="button" 
                className="btn btn-outline-secondary"
                onClick={onCancel}
              >
                {cancelText || t('common.cancel')}
              </button>
              <button 
                type="button" 
                className={`btn ${variantClass}`}
                onClick={onConfirm}
              >
                {confirmText || t('common.confirm')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
