import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Row } from 'components/layout';
import { colors } from 'theme/color';
import { Chip } from './index';
export default {
  title: 'Design System/Chip',
  component: Chip,
  argTypes: {
    variant: {
      options: ['plain', 'outline'],
      control: { type: 'select' },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['extra-small', 'small', 'medium', 'large'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: [
        'transparent',
        'base',
        'base-01',
        'base-02',
        'success',
        'success-01',
        'secondary',
        'secondary-01',
      ],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Chip>;

const Template: ComponentStory<typeof Chip> = (args) => {
  return (
    <Row>
      <Chip {...args} />
    </Row>
  );
};

export const Interactive = Template.bind({});
Interactive.args = {
  variant: 'plain',
  colorVariant: 'base-01',
  titleColor: 'body',
  title: 'Future of chip is here',
  sizeVariant: 'small',
};