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

import ChatBubble from './';
import MessageAttachment from '../MessageAttachment';
import { lightTheme } from '../../../../theme';
import { GlobalStyles } from '../../../../theme/GlobalStyles';
import * as ChatBubbleStories from './ChatBubble.stories.tsx';

<Meta of={ChatBubbleStories} />

# ChatBubble

The ChatBubble component displays incoming and outgoing chat messages and data.
It also determines the style of the bubble including color, chat bubble tail visibility, and name visibility.

ChatBubbles support tooltips on any buttons by adding a `data-tooltip` property. Adding a `data-tooltip-position` property controls the tooltip position

## Importing

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

## Example

<Canvas style={{ backgroundColor: '#eee' }}>
  <ThemeProvider theme={lightTheme}>
    <GlobalStyles />
    <ChatBubble
      variant="incoming"
      senderName="Jim Halpert"
      time="9:47 AM"
      css="margin: 1rem;"
    >
      I've always been your biggest flan.
    </ChatBubble>
    <ChatBubble
      variant="outgoing"
      senderName="Ryan Howard"
      time="9:45 AM"
      css="margin: 1rem;"
    >
      You should have put him in custardy.
    </ChatBubble>
    <ChatBubble variant="outgoing" senderName="Fred Miller" css="margin: 1rem;">
      This is an outgoing message with attachment
      <MessageAttachment
        name="Report.pdf"
        size="23.3KB"
        downloadUrl="https://test.com/download/Report.pdf"
      />
    </ChatBubble>
  </ThemeProvider>
</Canvas>

```jsx
    <ChatBubble
      variant="incoming"
      senderName="Jim Halpert"
      time="9:47 AM"
      css="margin: 1rem;"
    >
      I've always been your biggest flan.
    </ChatBubble>
    <ChatBubble
      variant="outgoing"
      senderName="Ryan Howard"
      time="9:45 AM"
      css="margin: 1rem;"
    >
      You should have put him in custardy.
    </ChatBubble>
    <ChatBubble
      variant="outgoing"
      senderName="Fred Miller"
      css="margin: 1rem;"
    >
      This is an outgoing message with attachment
      <MessageAttachment
        name="Report.pdf"
        size="23.3KB"
        downloadUrl="https://test.com/download/Report.pdf"
      />
    </ChatBubble>
```

## Props

<ArgTypes of={ChatBubble} />