import { Component, HostListener } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ConfirmDialog } from 'primeng/confirmdialog';
import { ToastModule } from 'primeng/toast';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule, ToastModule, ConfirmDialog],
  template: `
    <p-toast [position]="toastPosition" />
    <p-confirmDialog />
    <router-outlet />
  `,
})
export class AppComponent {
  toastPosition: 'top-center' | 'bottom-right' = 'bottom-right';

  constructor() {
    this.updateToastPosition();
  }

  @HostListener('window:resize')
  onResize() {
    this.updateToastPosition();
  }

  private updateToastPosition() {
    this.toastPosition =
      typeof window !== 'undefined' && window.innerWidth <= 768 ? 'top-center' : 'bottom-right';
  }
}