/* =============================================================================
 * ui_template_checkbox.ts
 * 공용 체크박스 — [□ 글] 한 줄 · 색은 테마 토큰(밝음 · 어두움 같이). 줄 세우기는 부르는 쪽 몫.
 *
 *   const box = createCheckbox("등고선", { checked: true, value: "contour" });
 *   panel.append(box.root);  // 읽기 = box.input.checked · box.input.value
 * ========================================================================== */

import "./ui_template_checkbox.css";

export interface Checkbox {
  root: HTMLLabelElement;
  input: HTMLInputElement;
}

export function createCheckbox(
  text: string,
  options: { checked?: boolean; value?: string } = {},
): Checkbox {
  const root = document.createElement("label");
  root.className = "ui-checkbox";
  const input = document.createElement("input");
  input.type = "checkbox";
  input.className = "ui-checkbox__input";
  input.checked = options.checked ?? false;
  if (options.value !== undefined) input.value = options.value;
  const caption = document.createElement("span");
  caption.className = "ui-checkbox__text";
  caption.textContent = text;
  root.append(input, caption);
  return { root, input };
}