import { NgTemplateOutlet } from '@angular/common';
import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input } from '@angular/core';

@Directive({
  selector: 'ng-template[<%= camelize(name) %>Fallback]',
})
export class <%= classify(name) %>Fallback {
  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
}

@Component({
  selector: '<%= selector %>',
  imports: [NgTemplateOutlet],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly fallback = contentChild(<%= classify(name) %>Fallback);

  readonly src = input('');
  readonly name = input('Ada Lovelace');
  readonly label = input('');
  readonly decorative = input(false, { transform: booleanAttribute });
  readonly size = input<string>('md');

  protected readonly avatarClasses = computed(() => `<%= dasherize(name) %> <%= dasherize(name) %>--${this.size()}`);
  protected readonly accessibleLabel = computed(() => this.decorative() ? null : this.label() || this.name());
  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);
  protected readonly altText = computed(() => this.decorative() ? '' : this.accessibleLabel() ?? '');

  protected readonly initials = computed(() => {
    const words = this.name().trim().split(/\s+/).filter(Boolean);
    return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? '').join('') || '?';
  });
}