import { Component, input, output } from '@angular/core';
import { SpinnerComponent } from '@shared/ui/atoms/spinner.component';
import type { RemoteData } from '@shared/application/remote-data';

@Component({
  selector: 'app-async',
  imports: [SpinnerComponent],
  template: `
    @switch (data().tag) {
      @case ('Loading') {
        <app-spinner />
      }
      @case ('Empty') {
        <p>{{ emptyText() }}</p>
      }
      @case ('Failure') {
        <p role="alert">{{ errorText() }}</p>
        <button type="button" (click)="retry.emit()">{{ retryText() }}</button>
      }
      @case ('Success') {
        <ng-content />
      }
    }
  `,
})
export class AsyncComponent<T> {
  data = input.required<RemoteData<T>>();
  emptyText = input('No data.');
  errorText = input('Something went wrong.');
  retryText = input('Retry');
  retry = output<void>();
}