import React from 'react';
import { X, AlertTriangle, Trash2, ShieldAlert } from 'lucide-react';

export default function ModalConfirm({
  isOpen,
  onClose,
  onConfirm,
  title = 'Confirmar Ação',
  message,
  description,
  confirmText = 'Confirmar',
  cancelText = 'Cancelar',
  type = 'warning', // 'warning' | 'danger'
  icon: CustomIcon
}) {
  if (!isOpen) return null;

  const isDanger = type === 'danger';
  const IconComponent = CustomIcon || (isDanger ? Trash2 : AlertTriangle);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div 
        className="modal-dialog modal-confirm-dialog" 
        onClick={(e) => e.stopPropagation()}
        style={{ maxWidth: '460px' }}
      >
        <div className="modal-header">
          <div className="modal-title-box">
            <div className={`modal-confirm-icon-box ${isDanger ? 'icon-box-danger' : 'icon-box-warning'}`}>
              <IconComponent size={20} />
            </div>
            <h3 className="modal-title">{title}</h3>
          </div>
          <button type="button" className="modal-close-btn" onClick={onClose} title="Fechar">
            <X size={20} />
          </button>
        </div>

        <div className="modal-body" style={{ padding: '1.5rem' }}>
          <p className="modal-confirm-message">{message}</p>
          {description && (
            <p className="modal-confirm-desc">{description}</p>
          )}
        </div>

        <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
          <button
            type="button"
            className="btn-modal-cancel"
            onClick={onClose}
          >
            {cancelText}
          </button>
          
          <button
            type="button"
            className={`btn-modal-action-confirm ${isDanger ? 'btn-confirm-danger' : 'btn-confirm-warning'}`}
            onClick={() => {
              onConfirm();
              onClose();
            }}
          >
            <IconComponent size={16} />
            <span>{confirmText}</span>
          </button>
        </div>
      </div>
    </div>
  );
}