import type { Meta, StoryObj } from '@storybook/angular';
import { StepperComponent } from './stepper.component';

const meta: Meta<StepperComponent> = {
  title: 'Design System/Molecules/Stepper',
  component: StepperComponent,
  render: (args) => ({
    props: args,
    template: `<app-stepper [steps]="steps" [current]="current" [processName]="processName" [stepTitle]="stepTitle" (stepSelected)="stepSelected($event)" />`,
  }),
};
export default meta;
type Story = StoryObj<StepperComponent>;

const steps = ['Adres', 'Beroep', 'Controle'];
const base = {
  steps,
  processName: 'Inschrijven in het BIG-register',
  stepTitle: '',
  stepSelected: () => {},
};

export const Eerste: Story = { args: { ...base, current: 0 } };
export const Midden: Story = {
  args: { ...base, current: 1, stepTitle: 'Beroep op basis van uw diploma' },
};
export const Laatste: Story = { args: { ...base, current: 2 } };
