/* =============================================================================
 * ui_template_text.ts
 * 부품 「보조 글 · 안내 줄」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`)
 *
 *   꼴   = 흐린 글(muted) · 안내(hint · ⓘ 아이콘) · 상태 글(error · warning · success — 글자 기호 ✗ ! ✓ 같이) · 칸 오류(`.ui-field__error`)
 *   크기 = 글 12(기본) · 14 — data-text 로 고름
 *   상태 = 오류 = error 꼴(색만으로 안 가름 · 기호 같이)
 *   쓰기 = `createText("저장 안 한 값이 있음", "warning")` · `createText("단위 m", "muted", 14)`
 *   대신 = 파일마다 `__muted`(약 30 벌) · `__hint` · `__status` · `__note` · `__warn` · `.b01-sys-error` · `b03-file__error` …(목록 4장)
 * ========================================================================== */

import { icon } from "./ui_template_icons";
import "./ui_template_text.css";

export type TextKind = "muted" | "hint" | "error" | "warning" | "success";

/** 상태 글 앞 기호 — 색만으로 안 가름 */
const MARK: Partial<Record<TextKind, string>> = { error: "✗", warning: "!", success: "✓" };

export function createText(
  text: string,
  kind: TextKind = "muted",
  size: 12 | 14 = 12,
): HTMLElement {
  const p = document.createElement("p");
  p.className = `ui-text ui-text--${kind}`;
  p.dataset.text = String(size);
  if (kind === "hint") p.append(icon("info", size + 2));
  const mark = MARK[kind];
  if (mark) {
    const m = document.createElement("span");
    m.className = "ui-text__mark";
    m.textContent = mark;
    p.append(m);
  }
  p.append(text);
  if (kind === "error") p.setAttribute("role", "alert");
  return p;
}