import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { ChoiceLinkComponent } from './choice-link.component';

const meta: Meta<ChoiceLinkComponent> = {
  title: 'Design System/Molecules/Choice Link',
  component: ChoiceLinkComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    // Rows are <li>s — a real list gives them their normal layout in the story.
    template: `<ul class="keuzelijst__list"><app-choice-link [heading]="heading" [instructions]="instructions" [to]="to" [clickable]="clickable" /></ul>`,
  }),
  parameters: {
    // Structural: app-choice-link's host sits between the <ul> and its <li> — axe's
    // list/listitem rule requires 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<ChoiceLinkComponent>;

export const Navigatie: Story = {
  args: {
    heading: 'Ik heb een Nederlands diploma',
    instructions: 'U kunt direct uw registratie aanvragen.',
    to: '/registreren',
  },
};
export const Actie: Story = {
  args: { heading: 'Inschrijving', instructions: 'Stap 2 van 3', clickable: true },
};
export const NietInteractief: Story = {
  args: {
    heading: 'Herregistratie',
    instructions: 'Referentie 2024-00123 · ingediend op 12 mei 2024',
  },
};
