import { action } from '@storybook/addon-actions';
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Input } from '../src/index';
import { Coffee } from 'react-feather';

<Meta title="Components|Input" component={Input} />

# Input

<Props of={Input} />

<Story name="simple">
  <Input name="input" placeholder="Placeholder" />
</Story>

## Error

<Story name="error">
  <Input
    name="input"
    placeholder="Placeholder"
    defaultValue="style@iseats.nl"
    danger
    message="Oops! Something went wrong"
  />
</Story>

## Success

<Story name="success">
  <Input
    name="input"
    placeholder="Placeholder"
    defaultValue="style@iseats.nl"
    success
    message="Looks good!"
  />
</Story>

## Clearable

<Story name="clearable">
  <Input
    name="input"
    placeholder="Placeholder"
    defaultValue="style@iseats.nl"
    clearable
  />
</Story>

## Password

<Story name="password">
  <Input
    name="input"
    placeholder="Password"
    defaultValue="password"
    clearable
    password
  />
</Story>

## Label

<Story name="label">
  <Input name="input" label="Email address" defaultValue="style@iseats.nl" />
</Story>

## Icon

<Story name="icon">
  <Input
    icon={<Coffee />}
    name="input"
    label="Email address"
    defaultValue="style@iseats.nl"
    block
  />
</Story>

## Disabled

<Story name="disabled">
  <Input name="input" defaultValue="style@iseats.nl" disabled clearable />
</Story>

## Block

<Story name="block">
  <Input name="input" defaultValue="style@iseats.nl" block />
</Story>