import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Dots } from './index';
export default {
  title: 'Design System/Dots',
  component: Dots,
  argTypes: {
    count: {
      control: {
        type: 'number',
        min: 1,
        max: 10,
      },
    },
    flexDirectionVariant: {
      options: ['column', 'row'],
      control: { type: 'select' },
    },
    hoverColorVariant: {
      options: [
        'transparent',
        'primary',
        'primary-hover',
        'base',
        'base-hover',
        'base-01',
        'base-02',
        'base-02-hover',
        'base-opacity-05',
        'base-opacity-06',
        'body',
        'success',
        'success-01',
        'secondary',
        'secondary-01',
        'secondary-hover',
      ],
      control: {
        type: 'select',
      },
    },
  },
} as ComponentMeta<typeof Dots>;

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

Interactive.args = {
  count: 3,
  size: 20,
  selectedIndex: 1,
  flexDirectionVariant: 'row',
  hoverColorVariant: 'base-01',
};