/* =============================================================================
 * E03_StabSection_UI_Parts.ts
 * E03 안 부품 걸이(553-4) — 부품(`ui_template_text` · `_empty` · `_card` · `_checkbox` · `_flow_legend`)을 부르고
 *   촬영 장면 · 시험이 잡는 이름(`e03-muted` · `e03-empty` · `e03-card` · `e03-check` · `e03-legend`)만 얹음.
 *   모양은 부품 · 이 파일에 CSS 없음.
 * ========================================================================== */

import { createCard } from "@ui/ui_template_card";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { createEmpty } from "@ui/ui_template_empty";
import { createLegend, type LegendItem } from "@ui/ui_template_flow_legend";
import { createText } from "@ui/ui_template_text";

/** 보조 글 한 줄(`data-role` 이 있으면 같이) */
export function muted(text: string, role?: string): HTMLElement {
  const node = createText(text, "muted");
  node.classList.add("e03-muted");
  if (role) node.dataset.role = role;
  return node;
}

/** 빈 자리 안내 */
export function emptyBox(text: string): HTMLElement {
  const node = createEmpty({ text, small: true });
  node.classList.add("e03-empty");
  return node;
}

/** 카드 판 — 속은 부르는 쪽이 채움 */
export function card(extra = "", role?: string): HTMLDivElement {
  const node = createCard({ pad: 12 });
  node.classList.add("e03-card", ...extra.split(" ").filter(Boolean));
  if (role) node.dataset.role = role;
  return node;
}

/** 체크 한 줄 */
export function check(
  label: string,
  checked: boolean,
  onChange: (v: boolean) => void,
): HTMLElement {
  const box = createCheckbox(label, { checked, onChange });
  box.root.classList.add("e03-check");
  return box.root;
}

/** 범례 — 색은 `var(--e03-…)`(그림 색 · 이 화면 자체 토큰) */
export function legend(items: LegendItem[], role?: string): HTMLElement {
  const node = createLegend(items);
  node.classList.add("e03-legend");
  if (role) node.dataset.role = role;
  return node;
}