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

import Microphone from './';
import { lightTheme } from '../../../../theme/';
import { GlobalStyles } from '../../../../theme/GlobalStyles';
import * as MicrophoneStories from './Microphone.stories.tsx';

<Meta of={MicrophoneStories} />

# Microphone Icon

The Microphone component creates an microphone icon using inline SVG. Typically, you can use it to indicate status of attendee's audio input.

You can define status of muted or poor connection.

## Importing

```javascript
import { Microphone } from 'amazon-chime-sdk-component-library-react';
```

## Example

With custom width

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Microphone width="2rem" />
  </Canvas>
</ThemeProvider>

```jsx
<Microphone width="2rem" />
```

With muted status

<ThemeProvider theme={lightTheme}>
  <Canvas>
    <Microphone muted width="2rem" />
  </Canvas>
</ThemeProvider>

```jsx
<Microphone muted width="2rem" />
```

With poor connection status

<ThemeProvider theme={lightTheme}>
  <Canvas>
    <Microphone poorConnection width="2rem" />
  </Canvas>
</ThemeProvider>

```jsx
<Microphone poorConnection width="2rem" />
```

## Props

<ArgTypes of={Microphone} />