@if (message) {
  <div class="flex items-center gap-3 px-4 py-3 rounded-lg border text-sm" [class]="bgClass">
    <fa-icon [icon]="['fas', iconMap[type]]" [class]="iconClass" class="flex-shrink-0" />
    <span class="flex-1">{{ message }}</span>
    @if (closable) {
      <button (click)="close.emit()" class="text-current opacity-50 hover:opacity-100 transition-opacity flex-shrink-0">
        <fa-icon [icon]="['fas', 'xmark']" size="sm" />
      </button>
    }
  </div>
}