import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import { Avatar, AvatarVariants } from "foundations/components/chat";

<Meta
  title="Chat Components/Avatar"
  component={Avatar}
  argTypes={{
    variant: { control: { type: "select", options: AvatarVariants } },
    color: { control: { type: "color" } },
    bg: { control: { type: "color" } }
  }}
/>

# Avatar

#### Easily differentiate users, conversations and other entities.

<br />
<br />
<br />

## Interactive props

export const Template = args => <Avatar {...args} />;

<Canvas>
  <Story name="Default" args={{ children: "AV" }}>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Usage examples

<br />
<br />

### Variants

<Canvas>
  <Story
    name="Variants"
    args={{ children: "AV", variant: AvatarVariants.ROUND }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Avatar variant={AvatarVariants.ROUND}>AV</Avatar>
```

### Colors

<Canvas>
  <Story
    name="Colors"
    args={{ children: "AV", bg: "teal", color: "whitesmoke" }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Avatar bg="teal" color="whitesmoke">
  AV
</Avatar>
```
