import React from "react";
import "../styles/_confirm-modal.scss";

const ConfirmModal = ({ 
    isOpen, 
    onClose, 
    onConfirm, 
    title = "Confirm Action", 
    message = "Are you sure you want to proceed?",
    confirmText = "Confirm",
    cancelText = "Cancel",
    type = "danger" // danger, warning, info
}) => {
    if (!isOpen) return null;

    const handleBackdropClick = (e) => {
        if (e.target === e.currentTarget) {
            onClose();
        }
    };

    return (
        <div className="confirm-modal-overlay" onClick={handleBackdropClick}>
            <div className={`confirm-modal ${type}`}>
                <div className="confirm-modal-header">
                    <h3>{title}</h3>
                    <button className="close-btn" onClick={onClose}>×</button>
                </div>
                
                <div className="confirm-modal-body">
                    <p>{message}</p>
                </div>
                
                <div className="confirm-modal-footer">
                    <button 
                        className="btn btn-cancel" 
                        onClick={onClose}
                    >
                        {cancelText}
                    </button>
                    <button 
                        className={`btn btn-confirm ${type}`} 
                        onClick={() => {
                            onConfirm();
                            onClose();
                        }}
                    >
                        {confirmText}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ConfirmModal;