components/modals/ConfirmDialog.jsx

import React from 'react';
import Modal from '../ui/Modal';

const ConfirmDialog = ({ 
  /**
   * Whether the dialog is currently open.
   */
  isOpen, 
  /**
   * Function to call when the dialog is closed (e.g., by clicking cancel or outside the modal).
   */
  onClose, 
  /**
   * Function to call when the confirm button is clicked.
   * This function should handle the primary action.
   */
  onConfirm, 
  title = 'Confirm Action', 
  message = 'Are you sure you want to proceed?',
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  loading = false
}) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
      <div className="space-y-4">
        <p className="text-gray-600">{message}</p>
        
        <div className="flex justify-end space-x-2">
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300"
            disabled={loading}
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:opacity-50"
            disabled={loading}
          >
            {loading ? 'Processing...' : confirmText}
          </button>
        </div>
      </div>
    </Modal>
  );
};

export default ConfirmDialog;