import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Message, MessageService } from '../../services/message.service';
import { MessageComponent } from './message.component';

@Component({
  selector: 'app-message-container',
  standalone: true,
  imports: [CommonModule, MessageComponent],
  template: `
    <div class="fixed top-5 right-5 z-50 flex flex-col items-end">
      <app-message
        *ngFor="let message of messages"
        [message]="message"
        (close)="removeMessage(message)"
      >
      </app-message>
    </div>
  `,
})
export class MessageContainerComponent implements OnInit {
  messages: Message[] = [];

  constructor(private messageService: MessageService) {}

  ngOnInit(): void {
    this.messageService.messages$.subscribe((messages) => {
      this.messages = messages;
    });
  }

  removeMessage(message: Message): void {
    this.messageService.removeMessage(message);
  }
}