export class YoyoSectionFeatures {
  private section: HTMLElement | null = null;
  private items: NodeListOf<HTMLLIElement> = [] as any;
  private currentClass: string | null = null;

  constructor() {
    this.section = document.querySelector<HTMLElement>("#configuracion-de-seguridad");
    if (!this.section) return;

    this.items = document.querySelectorAll<HTMLLIElement>("#configuracion-de-seguridad li[data-title]");
    this.init();
  }

  private init() {
    this.items.forEach((item) => {
      const dataTitle = item.dataset.title;
      if (!dataTitle) return;

      item.addEventListener("mouseenter", () => this.activate(dataTitle));
    });

    const first = this.items[0]?.dataset.title;
    if (first) this.activate(first);
  }

  private activate(cls: string) {
    if (!this.section) return;
    if (this.currentClass === cls) return;

    if (this.currentClass) this.section.classList.remove(this.currentClass);

    this.section.classList.add(cls);
    this.currentClass = cls;
  }
}