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

const ConfirmModal = ({ 
    isOpen, 
    onClose, 
    onConfirm, 
    title = 'Confirm Action', 
    message, 
    confirmText = 'Confirm', 
    cancelText = 'Cancel',
    type = 'danger' // 'danger', 'warning', 'info'
}) => {
    const handleConfirm = () => {
        onConfirm();
        onClose();
    };

    const getIconClass = () => {
        switch (type) {
            case 'danger':
                return 'dashicons-trash';
            case 'warning':
                return 'dashicons-warning';
            case 'info':
                return 'dashicons-info';
            default:
                return 'dashicons-warning';
        }
    };

    const getButtonClass = () => {
        switch (type) {
            case 'danger':
                return 'button-danger';
            case 'warning':
                return 'button-warning';
            case 'info':
                return 'button-primary';
            default:
                return 'button-primary';
        }
    };

    return (
        <Modal 
            isOpen={isOpen} 
            onClose={onClose} 
            title={title}
            size="small"
            closeOnOverlayClick={false}
        >
            <div className="confirm-modal-content">
                <div className="confirm-icon">
                    <span className={`dashicons ${getIconClass()}`}></span>
                </div>
                <div className="confirm-message">
                    <p>{message}</p>
                </div>
                <div className="confirm-actions">
                    <button 
                        className="button button-secondary" 
                        onClick={onClose}
                    >
                        {cancelText}
                    </button>
                    <button 
                        className={`button ${getButtonClass()}`} 
                        onClick={handleConfirm}
                    >
                        {confirmText}
                    </button>
                </div>
            </div>
        </Modal>
    );
};

export default ConfirmModal;