import { Component, input, signal } from '@angular/core';

interface <%= classify(name) %>Link {
  label: string;
  href: string;
}

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly expanded = signal(false);

  readonly label = input('Principal');
  readonly homeLabel = input('Início');
  readonly homeHref = input('/');
  readonly submenuLabel = input('Produtos');
  readonly submenuLinks = input<readonly <%= classify(name) %>Link[]>([
    { label: 'Primeiro produto', href: '/products/first' },
    { label: 'Segundo produto', href: '/products/second' },
  ]);

  protected toggleSubmenu(): void {
    this.expanded.update((value) => !value);
  }
}