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

const meta: Meta<ApplicationLinkComponent> = {
  title: 'Molecules/Application Link',
  component: ApplicationLinkComponent,
  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="list-unstyled"><app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable" /></ul>`,
  }),
  parameters: {
    // Structural: app-application-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<ApplicationLinkComponent>;

export const Navigatie: Story = {
  args: { heading: 'Inschrijven', subtitle: 'Schrijf u in in het BIG-register.', to: '/registreren' },
};
export const Actie: Story = {
  args: { heading: 'Inschrijving', status: 'Stap 2 van 3', cta: 'Verder gaan', clickable: true },
};
export const NietInteractief: Story = {
  args: { heading: 'Herregistratie', status: 'Referentie 2024-00123 · ingediend op 12 mei 2024' },
};