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: 'Design System/Molecules/Application Link',
  component: ApplicationLinkComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    // Rows are <li>s in the "aanvragen" list — a real <ul> gives them their layout.
    template: `<div class="dashboard-block applications"><ul class="list-unstyled"><li app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable"></li></ul></div>`,
  }),
  parameters: {
    cibgGap: true,
    docs: {
      description: {
        component:
          'CIBG-gap extension (non-navigating row only, see NietInteractief) — see Foundations/CIBG Gap Register.',
      },
    },
  },
};
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' },
};
