import { jsx as _jsx } from "react/jsx-runtime";
import './MessageBox.scss';
import Typography from '../Typography';
import classNames from 'classnames';
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 default MessageBox;
//# sourceMappingURL=MessageBox.js.map