import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import Stepper from './Stepper';

const STEPS = [
  {
    label: 'One',
    onClick: fn(),
  },
  {
    label: 'Two',
    hoverLabel: (
      <>
        <div>
          <strong>Diana Jaramillo</strong>
        </div>
        dianajarm123@gmail.com
      </>
    ),
    onClick: fn(),
  },
  { label: 'Recipient', onClick: fn() },
  { label: 'Smellification', onClick: fn() },
  { label: 'Battle', onClick: fn() },
];

export default {
  component: Stepper,
  title: 'Navigation/Stepper',
  argTypes: {
    activeStep: {
      control: 'radio',
      options: [...Array(STEPS.length).keys()],
    },
  },
} satisfies Meta<typeof Stepper>;

type Story = StoryObj<typeof Stepper>;

export const Basic: Story = {
  render: ({ activeStep, steps }) => {
    return <Stepper activeStep={activeStep} steps={steps} />;
  },
  args: {
    activeStep: 2,
    steps: STEPS,
  },
};