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

@Component({
  selector: 'app-toast',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div
      *ngIf="toastService.current$ | async as toast"
      class="toast"
      [class.success]="toast.type === 'success'"
      [class.error]="toast.type === 'error'"
    >{{ toast.message }}</div>
  `,
  styles: [`
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      border-radius: var(--radius);
      font-size: 0.9rem;
      pointer-events: none;
      z-index: 1000;
      white-space: nowrap;
    }
    .success {
      background: var(--surface-raised);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .error {
      background: var(--danger);
      color: var(--danger-text);
    }
  `],
})
export class ToastComponent {
  constructor(public toastService: ToastService) {}
}