import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { Stack, ORIENTATION } from "../..";
import { ComponentHeading } from "../../storybook-components";
import { SpeechBubble } from "./SpeechBubble";

export const placementOptions = [
  "top-start",
  "top-end",
  "bottom-start",
  "bottom-end",
];

<Meta title="Components/Data/Speech Bubble" component={SpeechBubble} />

<ComponentHeading
  componentName="Speech Bubble"
  description="Displays text in a box styled to look like a speech bubble"
  sourcePath="src/components/SpeechBubble/SpeechBubble.tsx"
/>

Use `SpeechBubble` for comments or quotes.

## Installation

```jsx
import { SpeechBubble } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="SpeechBubble">
    <SpeechBubble>This is the SpeechBubble component</SpeechBubble>
  </Story>
</Canvas>

## API

<ArgsTable of={SpeechBubble} />

## Demos

### Setting the placement of the arrow

Each speech bubble can have its arrow positioned on one of the corners. If
placement is not set explicitly, then the arrow will be positioned top-left.

<Canvas withSource={SourceState.OPEN}>
  <Story name="SpeechBubble placement">
    <Stack className="w-full" orientation={ORIENTATION.VERTICAL} spacing={8}>
      {placementOptions.map((placement) => (
        <SpeechBubble placement={placement} key={placement}>
          Placement: {placement}
        </SpeechBubble>
      ))}
    </Stack>
  </Story>
</Canvas>

### Using custom styles

An example to show how the styles of the speech bubble can be changed.

<Canvas withSource={SourceState.OPEN}>
  <Story name="SpeechBubble styles">
    <SpeechBubble
      className="w-56 bg-caution p-4 text-h4 text-black"
      placement="top-start"
    >
      Styles are different
    </SpeechBubble>
  </Story>
</Canvas>