import "./ui_template_general_layout.css";

export interface GeneralLayoutOptions {
  pageClass?: string;
  title?: string;
  subtitle?: string;
  content: HTMLElement | readonly HTMLElement[];
}

export interface GeneralLayoutHandle {
  root: HTMLElement;
  content: HTMLElement;
}

export function createGeneralLayout(options: GeneralLayoutOptions): GeneralLayoutHandle {
  const root = document.createElement("div");
  root.className = "ui-general-layout";
  if (options.pageClass) root.classList.add(options.pageClass);

  const inner = document.createElement("div");
  inner.className = "ui-general-layout__inner";

  if (options.title) {
    const header = document.createElement("header");
    header.className = "ui-general-layout__header";
    const title = document.createElement("h1");
    title.className = "ui-general-layout__title";
    title.textContent = options.title;
    header.append(title);
    if (options.subtitle) {
      const subtitle = document.createElement("p");
      subtitle.className = "ui-general-layout__subtitle";
      subtitle.textContent = options.subtitle;
      header.append(subtitle);
    }
    inner.append(header);
  }

  const content = document.createElement("main");
  content.className = "ui-general-layout__content";
  content.append(...(Array.isArray(options.content) ? options.content : [options.content]));
  inner.append(content);
  root.append(inner);
  return { root, content };
}