import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { SideNavComponent } from './side-nav.component';

const meta: Meta<SideNavComponent> = {
  title: 'Layout/Side Nav',
  component: SideNavComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    template: `<div style="max-inline-size:15rem"><app-side-nav [items]="items" /></div>`,
  }),
};
export default meta;
type Story = StoryObj<SideNavComponent>;

export const Default: Story = {
  args: {
    items: [
      { label: 'Overzicht', to: '/dashboard' },
      { label: 'Mijn gegevens', to: '/registratie' },
      { label: 'Herregistratie', to: '/herregistratie' },
      { label: 'Inschrijven', to: '/registreren' },
    ],
  },
};