/* =============================================================================
 * ui_template_panel_head.ts
 * 패널 머리 `panel-head`(552-4 틀) — 판 · 카드 · 구역 맨 위 한 줄: 제목 · 부제 · 오른쪽 단추.
 *   꼴   = 제목만 · 제목 + 부제(둘째 줄 흐린 글) · 오른쪽 단추 자리(actions) · 밑줄(divider)
 *   크기 = data-size 32(줄 높이 최소 32) · 제목 = --text-body-sm 600 · 부제 = --text-caption
 *   상태 = 없음(안 단추가 제 상태를 가짐)
 *   쓰는 법 = card.prepend(createPanelHead({ title: "배수관", sub: "3 개", actions: [btn] }).root)
 *   대신하는 옛 변종 = `.ui-general-block__section-header` · `.ui-side-panels__head` ·
 *     `b03-file__group` 제목 · `.b08-hydro__h2` · `.b08-sheets__title` · `e02-card__head` · `e03-card__head` · `m01-head`
 * ========================================================================== */

import "./ui_template_panel_head.css";

export interface PanelHeadOptions {
  title: string;
  sub?: string;
  actions?: HTMLElement[];
  /** 아래 1 px 선 */
  divider?: boolean;
  /** 제목 태그 — 기본 h3 */
  level?: 2 | 3 | 4;
}

export interface PanelHead {
  root: HTMLElement;
  title: HTMLElement;
  actions: HTMLElement;
  setTitle: (text: string) => void;
}

export function createPanelHead(opts: PanelHeadOptions): PanelHead {
  const root = document.createElement("header");
  root.className = "ui-panel-head";
  root.dataset.size = "32";
  if (opts.divider) root.classList.add("ui-panel-head--divider");
  const text = document.createElement("div");
  text.className = "ui-panel-head__text";
  const title = document.createElement(`h${opts.level ?? 3}`);
  title.className = "ui-panel-head__title";
  title.textContent = opts.title;
  text.append(title);
  if (opts.sub) {
    const sub = document.createElement("p");
    sub.className = "ui-panel-head__sub";
    sub.textContent = opts.sub;
    text.append(sub);
  }
  const actions = document.createElement("div");
  actions.className = "ui-panel-head__actions";
  actions.append(...(opts.actions ?? []));
  root.append(text, actions);
  return { root, title, actions, setTitle: (t) => void (title.textContent = t) };
}