import { Component, 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 cardLabel = input('Cartão de pagamento');
  readonly brand = input('Visa');
  readonly cardholderLabel = input('Titular do cartão');
  readonly cardholder = input('Marina Alves');
  readonly lastFourLabel = input('Final');
  readonly lastFour = input('4242');
  readonly expiryLabel = input('Validade');
  readonly expiry = input('12/28');
  readonly statusLabel = input('Ativo');
  readonly actionLabel = input('Gerenciar cartão');
  readonly cardAction = output<void>();

  protected readonly headingId = computed(() => `${this.instanceId}-heading`);
  protected readonly descriptionId = computed(() => `${this.instanceId}-description`);
  protected readonly accessibleDescription = computed(() => `${this.brand()} ${this.lastFourLabel()} ${this.lastFour()}`);

  protected handleAction(): void {
    this.cardAction.emit();
  }
}