import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

import { fAddress } from '../../.jest/__fixtures__';
import { Input } from './Input';

<Meta
  title="molecules/Input"
  component={Input}
  parameters={{ actions: { argTypesRegex: '^on.*' } }}
/>

# Input

Inputs!

<Canvas>
  <Story name="Default" args={{ value: fAddress, placeholder: 'Enter some text...' }}>
    {(props) => <Input {...props} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Error"
    args={{
      value: fAddress,
      variant: 'default',
      hasError: true,
      placeholder: 'Enter some text...'
    }}>
    {(props) => <Input {...props} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Simple"
    args={{ value: fAddress, variant: 'simple', placeholder: 'Enter some text...' }}>
    {(props) => <Input {...props} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="With Icon"
    args={{
      value: fAddress,
      variant: 'simple',
      icon: 'search',
      placeholder: 'Enter some text...'
    }}>
    {(props) => <Input {...props} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Custom Width/Height"
    args={{
      value: fAddress,
      variant: 'simple',
      icon: 'search',
      height: '50px',
      width: '300px',
      placeholder: 'Enter some text...'
    }}>
    {(props) => <Input {...props} />}
  </Story>
</Canvas>