import type { Meta, Story } from '@storybook/react';

import { Input } from '../input';
import type { InputProps } from '../input';
import mockInput from '../__mocks__/mockInput';

export default {
  component: Input,
  title: 'Forms/Basic Input',
  argTypes: {
    color: {
      options: ['primary', 'secondary'],
      control: { type: 'select' }
    },
    size: {
      options: ['medium', 'small'],
      control: { type: 'radio' }
    }
  }
} as Meta;

const Template: Story<InputProps> = args => <Input {...args} />;

export const Primary = Template.bind({});
Primary.args = mockInput;

export const Secondary = Template.bind({});
Secondary.args = {
  ...mockInput,
  color: 'secondary'
};

export const Active = Template.bind({});
Active.args = {
  ...mockInput,
  active: true
};