import { Component, input } from '@angular/core';
import { ChoiceListComponent } from '@shared/ui/choice-list/choice-list.component';
import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';

/** Presentational task shape — what "Wat moet ik regelen" renders. Domain-free so
    shared/ stays independent of any context (a context's task type that has these
    fields is structurally assignable). */
export interface TaskItem {
  readonly title: string;
  readonly description: string;
  readonly to: string;
  readonly actionLabel: string;
}

/** Molecule: the "Wat moet ik regelen" action list (NL Design System "Mijn
    omgeving" pattern), rendered as a CIBG Huisstijl "keuzelijst" — each task is a
    choice the user picks to resolve it. `actionLabel` has no keuzelijst equivalent
    (the whole row is the action; the chevron already implies "ga verder"). */
@Component({
  selector: 'app-task-list',
  imports: [ChoiceListComponent, ChoiceLinkComponent],
  template: `
    <app-choice-list [heading]="listHeading()">
      @for (t of tasks(); track t.title) {
        <app-choice-link [heading]="t.title" [instructions]="t.description" [to]="t.to" />
      }
    </app-choice-list>
  `,
})
export class TaskListComponent {
  listHeading = input.required<string>();
  tasks = input.required<readonly TaskItem[]>();
}
