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

export default {
  title: 'Design System/Radio',
  component: Radio,
  argTypes: {
    isActive: {
      control: { type: 'boolean' },
    },
    titleColor: {
      options: ['primary', 'secondary', 'base', 'title', 'base-01', 'base-02'],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['2-extra-small', 'extra-small', 'small', 'medium', 'large', 'extra-large'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: ['primary', 'secondary', 'base', 'title', 'base-01', 'base-02'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Radio>;

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

Interactive.args = {
  titleColor: 'title',
  isActive: true,
  size: 40,
  sizeVariant: 'small',
  colorVariant: 'base-02',
  leftTitle: 'Left',
  rightTitle: 'Right',
};