import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Crown from '../icons/Crown';
import Flex from '../Flex';
import Input from './';
import SearchInput from './SearchInput';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';
import * as InputStories from './Input.stories.tsx';

<Meta of={InputStories} />

# Input/SearchInput

The Input component specifies an input field where the user can enter data.

## Importing

```javascript
import { Input, SearchInput } from 'amazon-chime-sdk-component-library-react';
```

## Example

### Basic Input

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <Input
        showClear
        onChange={(e) => {}}
        sizing="md"
        value="input value"
        placeholder="input"
        type="text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<Flex layout="fill-space-centered">
  <Input
    showClear
    onChange={(e) => {}}
    sizing="md"
    value="input value"
    placeholder="input"
    type="text"
  />
</Flex>
```

### Input with Icon

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <Input
        showClear={false}
        onChange={(e) => {}}
        value="icon input value"
        placeholder="input with an icon"
        sizing="sm"
        type="text"
        leadingIcon={<Crown />}
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<Flex layout="fill-space-centered">
  <Input
    showClear={false}
    onChange={(e) => {}}
    value="icon input value"
    placeholder="input with an icon"
    sizing="sm"
    type="text"
    leadingIcon={<Crown />}
  />
</Flex>
```

### Search Input Component

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <SearchInput
        showClear
        value="search input value"
        onChange={(e) => {}}
        placeholder="a search input"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<Flex layout="fill-space-centered">
  <SearchInput
    showClear
    value="search input value"
    onChange={(e) => {}}
    placeholder="a search input"
  />
</Flex>
```

## Props

<ArgTypes of={Input} />