import { Component, Input } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'cal-error-alert',
  standalone: true,
  imports: [MatIconModule],
  template: `
    @if (message) {
      <div class="alert" role="alert">
        <mat-icon>error_outline</mat-icon>
        <span>{{ message }}</span>
      </div>
    }
  `,
  styles: [
    `
      .alert {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: #fef2f2;
        color: var(--cal-danger, #dc2626);
        border-radius: var(--cal-radius, 12px);
        border: 1px solid #fecaca;
        font-size: 0.875rem;
        line-height: 1.45;
      }
      mat-icon {
        flex-shrink: 0;
        font-size: 20px;
        width: 20px;
        height: 20px;
      }
    `,
  ],
})
export class ErrorAlertComponent {
  @Input() message: string | null = null;
}