/**
 * ConfirmDialog — Reusable confirmation overlay.
 *
 * Props:
 *   isOpen       (bool)   — Whether the dialog is visible
 *   onConfirm    (func)   — Called when user confirms
 *   onCancel     (func)   — Called when user cancels
 *   title        (string) — Dialog heading
 *   description  (string) — Explanatory text
 *   confirmLabel (string) — Confirm button text (default: "Delete")
 *
 * CR-07 fix: extracted from ScansPage and LocationDetails.
 */
var ConfirmDialog = function (props) {
    if (!props.isOpen) return null;
    var confirmLabel = props.confirmLabel || 'Delete';

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-6">
            <div className="bg-surface rounded-xl p-6 max-w-sm w-full shadow-soft space-y-4">
                <div className="flex items-start gap-3">
                    <span className="material-symbols-outlined text-warning text-2xl mt-0.5">warning</span>
                    <div>
                        <h3 className="font-extrabold text-forest">{props.title}</h3>
                        <p className="text-sm font-medium text-forest/70 mt-1">{props.description}</p>
                    </div>
                </div>
                <div className="flex gap-3">
                    <button onClick={props.onCancel} className="flex-1 py-3 rounded-xl border border-stone-100/50 text-sm font-bold text-forest btn-nature">Cancel</button>
                    <button onClick={props.onConfirm} className="flex-1 py-3 rounded-xl bg-warning text-white text-sm font-extrabold btn-nature">{confirmLabel}</button>
                </div>
            </div>
        </div>
    );
};

window.ConfirmDialog = ConfirmDialog;