/* =============================================================================
 * ui_template_empty.ts
 * 부품 「빈 상태」(552-3 · 목록 21) — 보일 것이 없을 때 그 자리에 놓는 안내.
 *   꼴   = 큰 꼴(카드 · 선 아이콘 원 · 한 줄 · 보조 글 · 주 단추 · 「사용법 보기」) · 작은 꼴(`small` — 패널 안 한 줄 · 테두리 없음)
 *   크기 = 아이콘 원 56 · 아이콘 32 · 글 14 / 보조 12
 *   상태 = 기본만
 *   쓰는 법 = `createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", action: createButton(…) })` · `createEmpty({ text: "고른 측점 없음", small: true })`
 *   대신하는 옛 변종 = B01 `emptyState`(`.b01-pg-empty`) · `.ui-general-block__empty` · `.ui-chart__empty` · `.b01-proj-empty` · 페이지마다 `__empty` 약 25 벌
 * ========================================================================== */

import { el } from "./ui_template_elements_base";
import { icon, type IconName } from "./ui_template_icons";
import "./ui_template_empty.css";

export interface EmptyOptions {
  /** 선 아이콘 이름 또는 만든 아이콘 요소 — 작은 꼴은 안 씀 */
  icon?: IconName | HTMLElement;
  text: string;
  hint?: string;
  /** 주 단추 */
  action?: HTMLElement;
  /** 「사용법 보기」 링크 — 누르면 */
  onGuide?: () => void;
  /** 패널 안 한 줄 */
  small?: boolean;
}

export function createEmpty(opts: EmptyOptions): HTMLElement {
  const box = el("div", { className: `ui-empty${opts.small ? " ui-empty--small" : ""}` });
  if (opts.icon && !opts.small) {
    const glyph = typeof opts.icon === "string" ? icon(opts.icon, 32) : opts.icon;
    box.append(el("div", { className: "ui-empty__icon", children: [glyph] }));
  }
  box.append(el("p", { className: "ui-empty__text", text: opts.text }));
  if (opts.hint) box.append(el("p", { className: "ui-empty__hint", text: opts.hint }));
  if (opts.action) box.append(opts.action);
  if (opts.onGuide) {
    const link = el("button", { className: "ui-empty__link", text: "사용법 보기" });
    link.type = "button";
    link.addEventListener("click", opts.onGuide);
    box.append(link);
  }
  return box;
}