import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";

const cn = "SpeechBubble";

export type SpeechBubblePlacement =
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";

export interface SpeechBubbleProps extends BoxProps {
  "data-placement"?: SpeechBubblePlacement;
}

export const SpeechBubble = (props: SpeechBubbleProps) => {
  const {
    "data-placement": dataPlacement = "top-start",
    className,
    ...rest
  } = props;

  return (
    <Box
      className={classNames(bem(cn), className)}
      data-placement={dataPlacement}
      {...rest}
    />
  );
};