import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToastService } from '../../services/toast.service';

@Component({
  selector: 'app-toast-container',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="toast-stack">
      <div *ngFor="let toast of toastService.toasts()"
           class="toast"
           [class.toast-error]="toast.type === 'error'"
           [class.toast-success]="toast.type === 'success'"
           [class.toast-info]="toast.type === 'info'"
           (click)="toastService.dismiss(toast.id)">
        <span class="toast-message">{{ toast.message }}</span>
        <button type="button" class="toast-close" aria-label="Dismiss"
                (click)="toastService.dismiss(toast.id); $event.stopPropagation()">×</button>
      </div>
    </div>
  `,
  styleUrls: ['./toast-container.component.scss'],
})
export class ToastContainerComponent {
  constructor(public toastService: ToastService) {}
}
