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

import { Avatar } from '.';
import { Props } from './props';

<Meta
  title="Development/Avatar"
  component={Avatar}
  argTypes={{
    isOnline: { table: { category: 'state' } },
    onClick: { table: { category: 'hooks' } },
    style: { table: { category: 'styles' } },
    statusStyle: { table: { category: 'styles' } },
  }}
/>

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

# Avatar

The Avatar visually represents a user.

Avatars's can also display a user's online status.

## Default

<Story
  name="Default"
  args={{
    username: 'Adam',
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Avatar Url

When you set the `avatarUrl` value, you can use a picture instead of `username`.

<Canvas>
  <Story
    name="No Avatar Url"
    args={{
      avatarUrl:
        'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Is Online

When you set `isOnline` to `true` or `false` there will be a green or red dot, respectively.

<Canvas>
  <Story
    name="Is Online"
    args={{
      username: 'Adam',
      showOnline: true,
      isOnline: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Custom Style

You can also use the `*Style` props to customize the look and feel.

<Canvas>
  <Story
    name="Custom Style"
    args={{
      username: 'Adam',
      isOnline: true,
      showOnline: true,
      style: { border: '2px solid red' },
      statusStyle: { border: '2px solid blue' },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>