import React from "react";
import { storiesOf } from "@storybook/react";
import Story from "../../storybook-components/Story";
import Examples from "../../storybook-components/Examples";
import { SpeechBubble, SpeechBubblePlacement } from "./SpeechBubble";

const stories = storiesOf("Components/Data/Speech Bubble", module);

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

stories.add("Default", () => (
  <Story title="SpeechBubble">
    <Examples>
      {placementOptions.map((placement) => (
        <SpeechBubble data-placement={placement}>
          This is the SpeechBubble component
        </SpeechBubble>
      ))}
    </Examples>
  </Story>
));