import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import { ArrowBarProps } from '../../../components/Arrow/SelectArrow';
import { Stepper } from '../../../components/Stepper';

const meta: Meta = {
  title: 'UI/Steppers/Stepper',
  component: Stepper,
};

export default meta;

const Template: Story<ArrowBarProps> = () => (
  <RPGUIRoot>
    <Stepper
      steps={[
        {
          component: <div>Step 1</div>,
          id: 0,
        },
        {
          component: <div>Step 2</div>,
          id: 1,
        },
        {
          component: <div>Step 3</div>,
          id: 2,
        },
      ]}
      finalCTAButton={{
        label: 'Submit',
        onClick: () => {
          console.log('Submitting your data');
        },
      }}
    ></Stepper>
  </RPGUIRoot>
);

export const Default = Template.bind({});

Default.args = {
  direction: 'left',
  onPointerDown: () => {
    console.log('clicked');
  },
};
