// retoor <retoor@molodetz.nl>
export class Tabs {
  constructor() {
    document.addEventListener("click", (event) => {
      const button = event.target.closest("[data-tabs] [data-tab]");
      if (button) {
        this.select(button);
      }
    });
  }

  select(button) {
    const bar = button.closest("[data-tabs]");
    const scope = bar.parentElement;
    bar.querySelectorAll("[data-tab]").forEach((item) => item.classList.toggle("active", item === button));
    scope.querySelectorAll(":scope > [data-panel]").forEach((panel) => {
      panel.hidden = panel.dataset.panel !== button.dataset.tab;
    });
  }
}