// counter.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">+1</button>
    <button (click)="decrement()">-1</button>
    <button (click)="reset()">Reset</button>
  `,
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update((n) => n + 1);
  }

  decrement() {
    this.count.update((n) => n - 1);
  }

  reset() {
    this.count.set(0);
  }
}

/*
  Notes:
  - count() is a function call to READ the signal — both in the
    template and in code.
  - .update(n => n + 1) changes based on the current value (like
    React's setCount(n => n + 1)); .set(0) assigns a fixed value
    (like setCount(0)).
*/