import { Component, input } from '@angular/core';

let nextId = 0;

/** Molecule: the CIBG Huisstijl "keuzelijst" — a heading semantically linked
    (`aria-labelledby`) to a list of `<app-choice-link>` choices, used where a
    screen offers a set of options to pick between (see
    designsystem.cibg.nl/componenten/keuzelijst). Domain-free — the caller
    supplies the heading text and the choices. */
@Component({
  selector: 'app-choice-list',
  template: `
    <h2 class="header header--medium" [id]="headingId">{{ heading() }}</h2>
    <ul class="keuzelijst__list" [attr.aria-labelledby]="headingId">
      <ng-content />
    </ul>
  `,
})
export class ChoiceListComponent {
  heading = input.required<string>();
  protected readonly headingId = `choice-list-${nextId++}`;
}
