import React from 'react';
import classNames from 'classnames';
import * as css from './SpeechBubble.css';

type SpeechBubbleProps = {
  children: React.ReactNode;
  className?: string;
  /** `menu` for dropdowns; `tooltip` for hover cards. */
  variant?: 'tooltip' | 'menu';
  /** Tail position. Currently only 'top' is implemented. */
  tail?: 'top' | 'none';
  /** Percentage string, e.g. '50%'. */
  tailX?: string;
  style?: React.CSSProperties;
};

export function SpeechBubble({
  children,
  className,
  variant = 'tooltip',
  tail = 'top',
  tailX,
  style,
}: SpeechBubbleProps) {
  const isMenu = variant === 'menu';

  return (
    <div
      className={classNames(
        isMenu ? css.SpeechBubbleMenu : css.SpeechBubble,
        tail === 'top' ? (isMenu ? css.SpeechBubbleMenuTailTop : css.SpeechBubbleTailTop) : undefined,
        className
      )}
      style={{
        ...(tailX ? ({ ['--speech-tail-x' as string]: tailX } as React.CSSProperties) : null),
        ...style,
      }}
    >
      {children}
    </div>
  );
}

