import {Component, Renderer2} from '@angular/core';
import { HeaderMenuComponent } from '../header-menu/header-menu.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  templateUrl: './header.component.html',
  styleUrl: './header.component.css',
  imports: [HeaderMenuComponent],
})
export class HeaderComponent {
  constructor(private router: Router, private renderer: Renderer2) {}

  goToScoreTable(image: HTMLElement) {
    this.renderer.addClass(image, 'spin-animation');

    // Wait for the animation to complete before navigating
    setTimeout(() => {
      this.renderer.removeClass(image, 'spin-animation');
      this.router.navigate(['/score-table']);
    }, 800); // Adjust the timeout/delay to match the animation duration (milliseconds)

  }
}
