<div [ngClass]="className">
  <div class="toast__icon-wrapper">
    <ui-icon [uiType]="UiIconType.INFO" [uiSize]="UiIconSize.L" *ngIf="error.severity === ErrorSeverity.HIGH"></ui-icon>
    <ui-icon
      [uiType]="UiIconType.WARNING"
      [uiSize]="UiIconSize.L"
      *ngIf="error.severity === ErrorSeverity.MEDIUM"
    ></ui-icon>
    <ui-icon
      [uiType]="UiIconType.APPROVED"
      [uiSize]="UiIconSize.L"
      *ngIf="error.severity === ErrorSeverity.LOW"
    ></ui-icon>
  </div>
  <div class="toast__content">
    <button class="toast__close-button" aria-label="Stäng meddelandet" (click)="emitCloseEvent()">
      <ui-icon [uiType]="UiIconType.X" [uiSize]="UiIconSize.L"></ui-icon>
    </button>
    <h3 class="toast__heading">{{ error.type }}</h3>
    <p class="toast__message">{{ error.message }}</p>
    <span class="toast__error-id">Error id: {{error.id}}</span>
  </div>
</div>
