import clsx from "clsx";

import styles from "./MessageBubble.module.scss";

interface MessageBubbleProps extends React.ComponentProps<"div"> {
  isOwn: boolean;
  children: React.ReactNode;
}

export default function MessageBubble({
  isOwn,
  children,
  className,
}: MessageBubbleProps) {
  return (
    <div
      className={clsx(
        styles.bubble,
        isOwn ? styles.own : styles.other,
        className
      )}
    >
      {children}
    </div>
  );
}
