import { Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CartService } from './cart.service';

@Component({
  selector: 'app-cart-button',
  standalone: true,
  imports: [RouterLink],
  template: `
    <button
      type="button"
      [routerLink]="'/cart'"
    >
      @if (heroes.length > 0) {
        <ul>
          <li *ngFor="let hero of heroes">
            @let isSelected = hero === selectedHero;
            <button type="button" (click)="selectHero(hero)" [class.selected]="isSelected">
              {{hero.name}}
            </button>
          </li>
        </ul>
      }
      Cart
    </button>
  `,
  styles: `div {display: block;}`,
})
export class CartButtonComponent {
  protected cartService = inject(CartService);
}