import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { default as autoAnimate } from '@formkit/auto-animate';
import { Winner } from '../../../services/winner.service';

@Component({
  selector: 'app-winner-ticker',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="flex items-center gap-12 animate-marquee will-change-transform" #tickerContainer>
      <span *ngFor="let winner of winners" class="flex items-center gap-3 whitespace-nowrap">
        <span class="text-yellow-300 text-lg animate-pulseGlow will-change-transform">🎰</span>
        <span class="font-medium">
          {{ winner.name }}
          <span class="text-yellow-300 font-semibold">{{ winner.isVIP ? '(VIP)' : '' }}</span>
          won <span class="text-yellow-300 font-semibold">€{{ winner.amount | number }}</span>
          <span class="text-yellow-300">({{ winner.multiplier }}x)</span>
        </span>
      </span>
    </div>
  `,
  styles: [],
})
export class WinnerTickerComponent implements AfterViewInit {
  @Input() winners: Winner[] = [];
  @ViewChild('tickerContainer') tickerContainer!: ElementRef;

  ngAfterViewInit(): void {
    autoAnimate(this.tickerContainer.nativeElement);
  }
}