import { jsx } from 'react/jsx-runtime';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';

const MessageBox = ({ content, isVisible, maxWidth = 300, onClick, isClickable = true, arrowPosition = 'left', }) => {
    return (jsx("div", { onClick: onClick, style: {
            width: `${maxWidth}px`,
            '--triangle-position': `${maxWidth - 4}px`,
        }, className: classNames('ff-chat-msg-box', {
            visible: isVisible,
            hidden: !isVisible,
            pointer: isClickable,
            default: !isClickable,
            'chat-arrow-left': arrowPosition === 'left',
            'chat-arrow-right': arrowPosition !== 'left',
        }), children: jsx("div", { className: classNames('content', `arrow-${arrowPosition}`), children: jsx(Typography, { children: content }) }) }));
};

export { MessageBox as default };
//# sourceMappingURL=MessageBox.js.map
