import { Component, booleanAttribute, computed, input, output } from '@angular/core';

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++}`;

  readonly label = input('Close');
  readonly variant = input<string>('default');
  readonly size = input<string>('md');
  readonly disabled = input(false, { transform: booleanAttribute });
  readonly buttonClick = output<MouseEvent>();

  protected readonly buttonClasses = computed(() => [
    '<%= dasherize(name) %>',
    `<%= dasherize(name) %>--${this.variant()}`,
    `<%= dasherize(name) %>--${this.size()}`,
  ].join(' '));

  protected handleClick(event: MouseEvent): void {
    if (this.disabled()) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }

    this.buttonClick.emit(event);
  }
}