import { Component, computed, input } from '@angular/core';
import { AlertComponent } from '@shared/ui/alert/alert.component';

type BannerType = 'info' | 'warning' | 'error';
type AlertType = 'info' | 'ok' | 'warning' | 'error';

/** Molecule: a polite, announced status banner. Wraps the alert atom and maps the
    banner type to an alert type. Pure UI: the container computes the message. */
@Component({
  selector: 'app-upload-status-banner',
  imports: [AlertComponent],
  template: `
    <div aria-live="polite">
      <app-alert [type]="alertType()">{{ message() }}</app-alert>
    </div>
  `,
})
export class UploadStatusBannerComponent {
  message = input.required<string>();
  type = input<BannerType>('info');

  protected readonly alertType = computed<AlertType>(() =>
    this.type() === 'info' ? 'info' : this.type(),
  );
}