import { Component, input } from '@angular/core';
import { LinkComponent } from '@shared/ui/link/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). Each task is a titled row with a call to action. */
@Component({
  selector: 'app-task-list',
  imports: [LinkComponent],
  styles: [`
    :host{display:block}
    .tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-md)}
    .task{
      display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-md) var(--rhc-space-max-xl);
      align-items:center;justify-content:space-between;
      background:var(--rhc-color-wit);
      border:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
      border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-lintblauw-700);
      border-radius:var(--rhc-border-radius-md);
      padding:var(--rhc-space-max-lg) var(--rhc-space-max-xl);
    }
    .title{margin:0 0 var(--rhc-space-max-xs);font-weight:var(--rhc-text-font-weight-semi-bold)}
    .desc{margin:0;color:var(--rhc-color-foreground-subtle);font-size:var(--rhc-text-font-size-sm)}
    .cta{flex:0 0 auto}
  `],
  template: `
    <ul class="tasks">
      @for (t of tasks(); track t.title) {
        <li class="task">
          <div>
            <p class="title">{{ t.title }}</p>
            <p class="desc">{{ t.description }}</p>
          </div>
          <span class="cta"><app-link [to]="t.to">{{ t.actionLabel }} →</app-link></span>
        </li>
      }
    </ul>
  `,
})
export class TaskListComponent {
  tasks = input.required<readonly TaskItem[]>();
}
