// user.service.ts — unchanged from Challenge 1
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('https://jsonplaceholder.typicode.com/users');
  }
}

// user-list.component.ts
import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (users$ | async; as users) {
      <ul>
        @for (user of users; track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class UserListComponent {
  private userService = inject(UserService);
  users$ = this.userService.getUsers(); // the Observable itself, NOT subscribed
}

/*
  Notes:
  - There is no ngOnInit and no .subscribe() — users$ holds the raw
    Observable, and the async pipe subscribes to it in the template.
  - The async pipe also unsubscribes automatically when the component
    is destroyed, removing the manual cleanup burden from option A.
  - Before the data arrives, (users$ | async) is null, so the @else
    branch shows "Loading..." as a simple loading state.
  - AsyncPipe must be imported (it lives in @angular/common).
*/