import React from 'react';
import {Meta, StoryFn} from '@storybook/react';

import Pill, {PillProps} from './index';

const meta: Meta<typeof Pill> = {
  title: 'Pill',
  component: Pill,
  argTypes: {
    variant: {
      control: 'radio',
      options: [
        'success',
        'warning',
        'error',
        'default',
        'info',
        'recommended',
        'outlineDefault',
        'outlinePrimary',
      ],
    },
  },
};

const Template: StoryFn<PillProps> = args => <Pill {...args} />;

const COMMON_ARGS = {
  label: 'Pill',
  disabled: false,
};

export const LGPill = Template.bind({});
LGPill.args = {
  ...COMMON_ARGS,
  size: 'lg',
};

export const MDPill = Template.bind({});
MDPill.args = {
  ...COMMON_ARGS,
  size: 'md',
};

export const SMPill = Template.bind({});
SMPill.args = {
  ...COMMON_ARGS,
  size: 'sm',
};

export default meta;