import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MStepperInline from './MStepperInline.vue';

const meta: Meta<typeof MStepperInline> = {
  title: 'Indicators/Stepper Inline',
  component: MStepperInline,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.',
      },
    },
  },
  args: {
    currentStep: 'step1',
    steps: [
      { id: 'step1', label: 'Cart' },
      { id: 'step2', label: 'Delivery address' },
      { id: 'step3', label: 'Payment' },
      { id: 'step4', label: 'Order confirmation' },
    ],
  },
  render: (args) => ({
    components: { MStepperInline },
    setup() {
      return { args };
    },
    template: `<MStepperInline v-bind="args" />`,
  }),
};

export default meta;
type Story = StoryObj<typeof MStepperInline>;

export const Default: Story = {};

export const AditionnalInfo: Story = {
  args: {
    currentStep: 'step2',
    steps: [
      { id: 'step1', label: 'Cart', additionalInfo: 'Additional information' },
      {
        id: 'step2',
        label: 'Delivery address',
        additionalInfo: 'Additional information',
      },
      {
        id: 'step3',
        label: 'Payment',
        additionalInfo: 'Additional information',
      },
      {
        id: 'step4',
        label: 'Order confirmation',
        additionalInfo: 'Additional information',
      },
    ],
  },
};