window.ConfirmModal = ({ config, onClose, isDark }) => {
    if (!config.show) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-[fadeIn_0.2s_ease-out]">
            {/* Backdrop */}
            <div 
                className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
                onClick={onClose}
            ></div>

            {/* Modal Content */}
            <div className={`relative w-full max-w-sm p-6 rounded-2xl border shadow-2xl transform scale-100 transition-all
                ${isDark ? 'bg-[#1e293b] border-white/10 text-white' : 'bg-white border-slate-200 text-slate-800'}
            `}>
                {/* Icon */}
                <div className="mb-4 text-3xl text-yellow-500">
                    <i className="fa-solid fa-circle-question"></i>
                </div>

                {/* Text */}
                <h3 className="text-xl font-bold mb-2 brand-font">{config.title}</h3>
                <p className={`text-sm mb-6 leading-relaxed ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>
                    {config.msg}
                </p>

                {/* Buttons */}
                <div className="flex gap-3 justify-end">
                    <button 
                        onClick={onClose}
                        className={`px-4 py-2 text-sm font-bold rounded-lg transition-colors
                            ${isDark ? 'hover:bg-white/10 text-gray-400' : 'hover:bg-slate-100 text-slate-600'}
                        `}
                    >
                        Cancel
                    </button>
                    <button 
                        onClick={() => { config.action(); onClose(); }}
                        className="px-5 py-2 text-sm font-bold bg-red-500 hover:bg-red-600 text-white rounded-lg shadow-lg shadow-red-500/20 transition-transform active:scale-95"
                    >
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    );
};