import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { BreadcrumbComponent } from './breadcrumb.component';

const meta: Meta<BreadcrumbComponent> = {
  title: 'Design System/Molecules/Breadcrumb',
  component: BreadcrumbComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    // Rendered inside a mock .titlebar .title so the story reflects the real chrome.
    template: `<div class="titlebar" style="padding: 1rem"><div class="title"><app-breadcrumb [items]="items" /></div></div>`,
  }),
};
export default meta;
type Story = StoryObj<BreadcrumbComponent>;

export const TweeNiveaus: Story = {
  args: {
    items: [
      { label: 'Mijn omgeving', link: '/dashboard' },
      { label: 'Inschrijven in het BIG-register' },
    ],
  },
};
export const DrieNiveaus: Story = {
  args: {
    items: [
      { label: 'Mijn omgeving', link: '/dashboard' },
      { label: 'Registratie', link: '/registratie' },
      { label: 'Inschrijven' },
    ],
  },
};