"use client";

import Modal from "@/components/Modal";

/**
 * 站点风格确认框：基于 Modal。点遮罩不关（需明确取消/关闭）；ESC / 取消 / 关闭可关。
 * danger 主按钮使用 btn-danger，其余用 btn-primary。
 */
export default function ConfirmDialog({
  open,
  title,
  message,
  confirmLabel = "确定",
  cancelLabel = "取消",
  danger = false,
  busy = false,
  zIndexClass = "z-[1100]",
  onConfirm,
  onCancel,
}: {
  open: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  danger?: boolean;
  busy?: boolean;
  /** 叠层高度；默认 1100，被更高弹窗遮挡时上调（如编辑器主弹窗 1200 时传 1300） */
  zIndexClass?: string;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  return (
    <Modal
      open={open}
      title={title}
      onClose={onCancel}
      busy={busy}
      zIndexClass={zIndexClass}
      maxWidthClass="max-w-sm"
      panelClassName="p-5"
      footer={
        <>
          <button
            type="button"
            onClick={onCancel}
            disabled={busy}
            className="btn btn-line btn-sm"
          >
            {cancelLabel}
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={busy}
            className={`btn btn-sm ${danger ? "btn-danger" : "btn-primary"}`}
          >
            {busy ? "处理中…" : confirmLabel}
          </button>
        </>
      }
    >
      <p className="text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
        {message}
      </p>
    </Modal>
  );
}