import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { TaskListComponent } from './task-list.component';

const meta: Meta<TaskListComponent> = {
  title: 'Design System/Molecules/Task List',
  component: TaskListComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    template: `<app-task-list [listHeading]="listHeading" [tasks]="tasks" />`,
  }),
  parameters: {
    // Structural: app-choice-link's host sits between the keuzelijst <ul> and its <li>
    // — axe's list/listitem rule needs them adjacent regardless of `display:contents`.
    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/backlog/WP-11-markup-fidelity.md.
    a11y: { disable: true },
  },
};
export default meta;
type Story = StoryObj<TaskListComponent>;

export const Default: Story = {
  args: {
    listHeading: 'Wat moet ik regelen',
    tasks: [
      {
        title: 'Vraag uw herregistratie aan',
        description: 'Verleng uw registratie vóór 31 december 2026.',
        to: '/herregistratie',
        actionLabel: 'Herregistratie aanvragen',
      },
      {
        title: 'Controleer uw adresgegevens',
        description: 'Uw adres is langer dan een jaar niet bevestigd.',
        to: '/registratie',
        actionLabel: 'Bekijk uw gegevens',
      },
    ],
  },
};