import { AlertTriangle, Loader2 } from 'lucide-react';

/**
 * Reusable Confirmation Modal for actions that need user confirmation
 *
 * @param {boolean} isOpen - Controls modal visibility
 * @param {function} onClose - Close/Cancel handler
 * @param {function} onConfirm - Confirm action handler
 * @param {string} title - Modal title
 * @param {string} description - Optional description text
 * @param {string} message - Main message/question to display
 * @param {string} confirmText - Confirm button text (default: 'Confirm')
 * @param {string} cancelText - Cancel button text (default: 'Cancel')
 * @param {string} confirmButtonClass - Custom classes for confirm button (default: red/danger style)
 * @param {React.Component} icon - Icon component (default: AlertTriangle)
 * @param {string} iconBgClass - Icon background class (default: bg-red-100)
 * @param {string} iconColorClass - Icon color class (default: text-red-600)
 * @param {boolean} isLoading - Shows loading state on confirm button
 * @param {string} loadingText - Text to show when loading (default: 'Loading...')
 */
const ConfirmationModal = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  confirmButtonClass = 'bg-red-600 hover:bg-red-700',
  icon: Icon = AlertTriangle,
  iconBgClass = 'bg-red-100',
  iconColorClass = 'text-red-600',
  isLoading = false,
  loadingText = 'Loading...'
}) => {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header with Icon */}
        <div className="flex items-center gap-3 mb-4">
          <div className={`w-12 h-12 rounded-full ${iconBgClass} flex items-center justify-center flex-shrink-0`}>
            <Icon className={iconColorClass} size={24} />
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
            {description && <p className="text-sm text-gray-600">{description}</p>}
          </div>
        </div>

        {/* Message */}
        {message && (
          <p className="text-gray-700 mb-6">{message}</p>
        )}

        {/* Actions */}
        <div className="flex gap-3">
          <button
            onClick={onClose}
            disabled={isLoading}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            disabled={isLoading}
            className={`flex-1 px-4 py-2 ${confirmButtonClass} text-white rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
          >
            {isLoading ? (
              <>
                <Loader2 className="animate-spin" size={16} />
                {loadingText}
              </>
            ) : (
              confirmText
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmationModal;