import React from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import classes from './MessageBubble.module.scss';

interface MessageBubbleProps {
  children: React.ReactNode;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
}

const MessageBubble = React.forwardRef((props: MessageBubbleProps, ref: React.ForwardedRef<HTMLDivElement>) => {
  const { children, className, style, ...restProps } = props;

  return (
    <View
      ref={ref}
      className={cs(classes['message-bubble'], className)}
      style={style}
      {...restProps}
    >
      {children}
    </View>
  );
});

MessageBubble.displayName = 'MessageBubble';

export default MessageBubble;