import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ProgressBar } from './index';

export default {
  title: 'Design System/Progress Bar',
  component: ProgressBar,
  argTypes: {
    size: {
      control: {
        type: 'number',
        min: 1,
        max: 500,
      },
    },
    directionVariant: {
      options: ['horizontal', 'vertical'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof ProgressBar>;

export const Interactive: ComponentStory<typeof ProgressBar> = (args) => {
  return <ProgressBar {...args} />;
};

Interactive.args = {
  directionVariant: 'horizontal',
  size: 20,
  colorVariant: 'base-01-hover',
};