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

const meta: Meta<ChoiceListComponent> = {
  title: 'Design System/Molecules/Choice List',
  component: ChoiceListComponent,
  decorators: [
    applicationConfig({ providers: [provideRouter([])] }),
    moduleMetadata({ imports: [ChoiceLinkComponent] }),
  ],
  render: (args) => ({
    props: args,
    template: `
      <app-choice-list [heading]="heading">
        <app-choice-link heading="Ik heb een Nederlands diploma" instructions="U kunt direct uw registratie aanvragen." to="/registreren" />
        <app-choice-link heading="Ik heb een buitenlands diploma" instructions="Uw diploma moet eerst officieel erkend worden." clickable="true" />
      </app-choice-list>`,
  }),
  parameters: {
    // Structural: app-choice-link's host sits between the <ul> and its <li> —
    // fixed by the WP-11 markup rework. See docs/backlog/WP-11-markup-fidelity.md.
    a11y: { disable: true },
  },
};
export default meta;
type Story = StoryObj<ChoiceListComponent>;

export const Default: Story = { args: { heading: 'Maak een keuze' } };