import { Btn } from "../primitives/index.js";
import { ModalBackdrop, ModalFooter } from "./ModalChrome.js";

export function ConfirmDialog({
  title,
  message,
  confirmLabel = "Delete",
  confirmVariant = "danger",
  onConfirm,
  onCancel,
  isPending = false,
}: {
  title: string;
  message: string;
  confirmLabel?: string;
  confirmVariant?: "danger" | "primary";
  onConfirm: () => void;
  onCancel: () => void;
  isPending?: boolean;
}) {
  return (
    <ModalBackdrop onClose={onCancel}>
      <div
        style={{
          width: "min(460px, 96vw)",
          margin: "120px 20px",
          background: "var(--bg)",
          border: "1px solid var(--line)",
          borderRadius: "var(--r-lg)",
          boxShadow: "var(--shadow-lg)",
        }}
      >
        <div style={{ padding: "28px 32px 8px" }}>
          <h2
            className="serif"
            style={{ fontSize: 24, margin: 0, fontWeight: 500, lineHeight: 1.2 }}
          >
            {title}
          </h2>
          <p style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.5 }}>
            {message}
          </p>
        </div>
        <ModalFooter>
          <div />
          <div style={{ display: "flex", gap: 8 }}>
            <Btn variant="ghost" onClick={onCancel}>
              Cancel
            </Btn>
            <Btn
              variant={confirmVariant}
              disabled={isPending}
              onClick={onConfirm}
            >
              {isPending ? "Deleting…" : confirmLabel}
            </Btn>
          </div>
        </ModalFooter>
      </div>
    </ModalBackdrop>
  );
}