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

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

/** Atom: alert/message banner. */
@Component({
  selector: 'app-alert',
  template: `
    <div
      class="utrecht-alert rhc-alert"
      [class.utrecht-alert--info]="type() === 'info'"
      [class.utrecht-alert--ok]="type() === 'ok'"
      [class.utrecht-alert--warning]="type() === 'warning'"
      [class.utrecht-alert--error]="type() === 'error'"
      role="status">
      <ng-content />
    </div>
  `,
})
export class AlertComponent {
  type = input<AlertType>('info');
}