import { Component, inject } from '@angular/core';
import { AsyncPipe, NgFor } from '@angular/common';
import { map, Observable, startWith } from 'rxjs';

import { TierService } from '../services/tier.service';
import { Tier } from '../interfaces/tier';

interface TiersState {
  loading: boolean;
  tiers: Tier[];
}

@Component({
  selector: 'app-donate',
  standalone: true,
  imports: [AsyncPipe, NgFor],
  templateUrl: './donate.component.html',
  styleUrl: './donate.component.scss',
})
export class DonateComponent {
  private tierService = inject(TierService);

  /** Async pipe drives the template — guarantees change detection on every emission. */
  readonly tiers$: Observable<TiersState> =
    this.tierService.getTiers().pipe(
      map((tiers) => ({ loading: false, tiers })),
      startWith({ loading: true, tiers: [] }),
    );
}