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

export default {
  title: 'Design System/Switch',
  component: Switch,
  argTypes: {
    value: {
      control: { type: 'boolean' },
    },
    circleSize: {
      control: { type: 'number', min: 5, max: 100 },
    },
    titlePosition: {
      options: ['left', 'right'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Switch>;

export const Interactive: ComponentStory<typeof Switch> = ({ value, onValueChange, ...args }) => {
  const [switchValue, setSwitchValue] = useState(true);
  return <Switch {...args} value={switchValue} onValueChange={setSwitchValue} />;
};

Interactive.args = {
  value: true,
  title: 'Stop Auto Complete',
  titlePosition: 'left',
  circleSize: 20,
  switchBorderRadius: 10,
};