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

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

// visually-hidden alternative for the status icon (CIBG a11y requirement).
const ICON_LABELS: Record<AlertType, string> = {
  info: $localize`:@@alert.icon.info:Informatie`,
  ok: $localize`:@@alert.icon.ok:Gelukt`,
  warning: $localize`:@@alert.icon.warning:Waarschuwing`,
  error: $localize`:@@alert.icon.error:Foutmelding`,
};

/** Atom: alert/message banner — the CIBG Huisstijl "melding"
    (designsystem.cibg.nl/componenten/meldingen). Thin wrapper over the vendored
    `.feedback feedback-*` classes: the design system owns surface + icon; we add
    only the icon's a11y label and a content wrapper (`.feedback` is a flex row).
    Errors are `role="alert"` (assertive — interrupts) since they need immediate
    attention; other variants stay `role="status"` (polite) so success/info banners
    don't interrupt what the user is doing. */
@Component({
  selector: 'app-alert',
  styles: [
    `
      .feedback > div {
        flex: 1 1 auto;
        min-width: 0;
      }
    `,
  ],
  template: `
    <div
      class="feedback"
      [class.feedback-info]="type() === 'info'"
      [class.feedback-success]="type() === 'ok'"
      [class.feedback-warning]="type() === 'warning'"
      [class.feedback-error]="type() === 'error'"
      [attr.role]="type() === 'error' ? 'alert' : 'status'"
      aria-atomic="true"
    >
      <span class="icon"
        ><span class="visually-hidden">{{ iconLabels[type()] }}</span></span
      >
      <div><ng-content /></div>
    </div>
  `,
})
export class AlertComponent {
  type = input<AlertType>('info');
  protected readonly iconLabels = ICON_LABELS;
}