import { ComponentStory, ComponentMeta } from '@storybook/react';
import { colors } from 'theme/color';
import { Checkbox } from './index';
const colorsList = ['primary', 'secondary', 'success', 'base', 'base-01', 'base-02', 'transparent'];
export default {
  title: 'Design System/Checkbox',
  component: Checkbox,
  argTypes: {
    isActive: {
      control: { type: 'boolean' },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    shapeVariant: {
      options: ['square', 'round', 'circle'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: colorsList,
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['2-extra-small', 'extra-small', 'small', 'medium', 'large', 'extra-large'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Checkbox>;

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

Interactive.args = {
  isActive: true,
  titleColor: 'body',
  sizeVariant: 'medium',
  colorVariant: 'base-01',
  shapeVariant: 'circle',
  leftTitle: 'On',
  rightTitle: 'Off',
};