import BmsStepper from '@/components/layout/BmsStepper.vue';
import BmsStep from '@/components/layout/BmsStep.vue';

export default {
  title: 'Composants/layout/Stepper',
  component: BmsStepper,
  argTypes: {
    currentStep: {
      constrol: { type: 'number' },
    },
  },
};

const Template = (args) => ({
  components: {
    BmsStep,
    BmsStepper,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsStepper v-bind="args">
      <BmsStep
        stepLabel="Label"
        :stepComplete="false"
        previousLabel=""
      >
        <div>Content 1</div>
      </BmsStep>
      <BmsStep
        stepLabel="Label 2"
        :stepComplete="false"
      >
        <div>Content 2</div>
      </BmsStep>
      <BmsStep
        stepLabel="Label 3"
        :stepComplete="true"
        nextLabel=""
      >
        <div>Content 3</div>
      </BmsStep>
    </BmsStepper>
  `,
});

export const Default = Template.bind({});
Default.args = {
  currentStep: 0,
};

export const Clickable = Template.bind({});
Clickable.args = {
  currentStep: 0,
  clickable: true,
};
