import { Component } from '@angular/core';
import { inject, signal } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'bh-http-errors',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="load()">Load service status</button>
    <p data-result>{{ message() }}</p>`,
})
export class App {
  private http = inject(HttpClient);
  message = signal('Not loaded');
  load(): void {
    this.message.set('Loading');
    this.http.get('/api/failure').subscribe({
      next: () => this.message.set('Unexpected success'),
      error: (error: HttpErrorResponse) =>
        this.message.set(
          error.status === 503 ? 'Desk service unavailable' : 'Request failed',
        ),
    });
  }
}