/* =============================================================================
 * ui_template_badge.ts
 * 부품 「배지」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`) — 대시보드 `.b01-pg-badge` 꼴
 *
 *   꼴   = 알약(pill · 상태 · 역할 · 종류 — 한글 글 + 색) · 수(count · 빨강 동그라미 · 알림) · 램프(lamp · 점 + 글 · 성공 ✓ · 실패 ✗ 같이)
 *          · 점(dot · 글 없음 · title 필수)
 *   색   = accent(진행 · 선) · success · warning · danger · info · neutral
 *   크기 = data-size 18 · 20(기본 20) · 점 8
 *   상태 = 없음(눌리지 않음)
 *   쓰기 = `createBadge("진행 중", "accent")` · `createBadge("3", "danger", { kind: "count" })` · `createBadge("통과", "success", { kind: "lamp" })`
 *   대신 = `.ui-tag--*` 손 조립 · B01 `.b01-pg-badge` · `.b01-proj-badge` · 램프 `b08-summary__lamp` · `b09-bill__lamp` · E03 `e03-verdict` ·
 *          M02 알약 여섯 …(목록 4장)
 *   클래스 = 알약은 옛 `ui-tag ui-tag--<색>` 도 같이 냄(시험 · B09 표 PDF 가 잡음)
 * ========================================================================== */

import { setUiSize } from "./ui_template_button";
import "./ui_template_badge.css";

export type BadgeTone = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
export type BadgeKind = "pill" | "count" | "lamp" | "dot";

/** 램프 글자 기호 — 색만으로 안 가름(시험이 글자로 잡음) */
const LAMP_MARK: Partial<Record<BadgeTone, string>> = { success: "✓", danger: "✗" };

export function createBadge(
  text: string,
  tone: BadgeTone = "neutral",
  opts: { kind?: BadgeKind; size?: 18 | 20 } = {},
): HTMLSpanElement {
  const kind = opts.kind ?? "pill";
  const span = document.createElement("span");
  span.className = `ui-badge ui-badge--${kind} ui-badge--${tone}${kind === "pill" ? ` ui-tag ui-tag--${tone}` : ""}`;
  if (kind !== "dot") setUiSize(span, opts.size ?? 20);
  if (kind === "dot") {
    span.title = text;
    span.setAttribute("aria-label", text);
  } else if (kind === "lamp") {
    const mark = LAMP_MARK[tone];
    span.textContent = mark ? `${mark} ${text}` : text;
  } else {
    span.textContent = text;
  }
  return span;
}