// status-display.component.ts
import { Component } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-status-display',
  standalone: true,
  imports: [NgClass],
  template: `
    <button (click)="cycle()">Next status</button>

    <p [ngClass]="{ loading: status === 'loading', error: status === 'error', success: status === 'success' }">
      @switch (status) {
        @case ('loading') { Loading... }
        @case ('error') { Something went wrong. }
        @default { Ready! }
      }
    </p>
  `,
  styles: [`
    .loading { color: gray; }
    .error { color: red; }
    .success { color: green; }
  `],
})
export class StatusDisplayComponent {
  private order = ['loading', 'error', 'success'];
  status = 'loading';

  cycle() {
    const next = (this.order.indexOf(this.status) + 1) % this.order.length;
    this.status = this.order[next];
  }
}

/*
  Notes:
  - @switch renders different text per status value, the template-level
    equivalent of React's lookup-object pattern from Fundamentals Ch 5.
  - [ngClass] applies whichever of the three CSS classes matches the
    current status — note NgClass must be imported (unlike the @ blocks,
    which need no import).
  - cycle() rotates through the three statuses so all branches and all
    colors can be seen by clicking repeatedly.
*/