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

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

/** Atom: alert/message banner. CIBG's Bootstrap build drops the stock `.alert`, so this
    is a hand-rolled surface styled from the (CIBG-valued) token bridge — no raw hex. */
@Component({
  selector: 'app-alert',
  styles: [`
    .alert-box{
      border:var(--rhc-border-width-sm) solid;
      border-inline-start-width:var(--rhc-border-width-md);
      border-radius:var(--rhc-border-radius-md);
      padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
      color:var(--rhc-color-foreground-default);
    }
    .alert-info{background:var(--rhc-color-hemelblauw-100);border-color:var(--rhc-color-foreground-link)}
    .alert-ok{background:var(--rhc-color-groen-300);border-color:var(--rhc-color-groen-500)}
    .alert-warning{background:var(--rhc-color-geel-100);border-color:var(--rhc-color-geel-600)}
    .alert-error{background:var(--rhc-color-rood-100);border-color:var(--rhc-color-rood-500)}
  `],
  template: `
    <div
      class="alert-box"
      [class.alert-info]="type() === 'info'"
      [class.alert-ok]="type() === 'ok'"
      [class.alert-warning]="type() === 'warning'"
      [class.alert-error]="type() === 'error'"
      role="status">
      <ng-content />
    </div>
  `,
})
export class AlertComponent {
  type = input<AlertType>('info');
}
