import { Component, booleanAttribute, computed, input } 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('Loading');
  readonly variant = input<string>('primary');
  readonly size = input<string>('md');
  readonly labelVisible = input(false, { transform: booleanAttribute });
  readonly decorative = input(false, { transform: booleanAttribute });

  protected readonly spinnerClasses = computed(() => [
    '<%= dasherize(name) %>',
    `<%= dasherize(name) %>--${this.variant()}`,
    `<%= dasherize(name) %>--${this.size()}`,
    this.labelVisible() ? '<%= dasherize(name) %>--with-label' : '',
  ].filter(Boolean).join(' '));

  protected readonly statusRole = computed(() => this.decorative() ? null : 'status');
  protected readonly ariaLive = computed(() => this.decorative() ? null : 'polite');
  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);
}