import React from 'react';

import Select, { selectSizes, selectVariants } from '~/inputs/Select';

export default {
  title: 'Inputs/Select',
  component: Select,
  args: {
    sizing: 'md',
    variant: 'default',
    children: (
      <>
        <option value={30}>30 days</option>
        <option value={60}>60 days</option>
      </>
    ),
  },
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: selectVariants,
      },
    },
    sizing: {
      control: {
        type: 'select',
        options: selectSizes,
      },
    },
  },
};

const Template = (args) => <Select {...args} />;

export const Default = Template.bind({});

export const Small = Template.bind({});
Small.args = {
  sizing: 'sm',
};

export const Minimal = Template.bind({});
Minimal.args = { variant: 'minimal' };

export const MinimalSmall = Template.bind({});
MinimalSmall.args = { sizing: 'sm', variant: 'minimal' };