import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
import { Sport } from './sport.model';
import { SportService } from './sport.service';

@Component({
  selector: 'app-tysc-sports',
  imports: [],
  templateUrl: './tysc-sports.component.html',
  styleUrl: './tysc-sports.component.css'
})
export class TyscSportsComponent implements OnInit {
  sports = signal<Sport[] | undefined>(undefined);
  isFetching = signal(false);
  error = signal('');
  private sportService = inject(SportService);
  private destroyRef = inject(DestroyRef);


  ngOnInit() {
    this.isFetching.set(true);
    const subscription = this.sportService.loadSports().subscribe({
      next: (sports) => {
        this.sports.set(sports);
      },
      error: (error: Error) => {
        this.error.set(error.message);
      },
      complete: () => {
        this.isFetching.set(false);
      },
    });

    this.destroyRef.onDestroy(() => {
      subscription.unsubscribe();
    });
  }
}
