import React from 'react';
import useRenderTracker from '../../../hooks/useRenderTracker';

interface UserMessageProps {
    content: string;
}

const UserMessage = ({ content }: UserMessageProps) => {
    useRenderTracker('UserMessage', { content });
    return (
        <div className="flex justify-end">
          <div className="text-sm sm:text-[0.95rem] px-4 py-3 my-2 rounded-[1.3rem] overflow-hidden bg-secondary/10 dark:bg-secondary/20 text-gray-700 dark:text-gray-300 inline-block max-w-[80%]">
            <div className="max-w-none overflow-hidden text-left whitespace-pre-wrap">
              {content}
            </div>
          </div>
        </div>
      );
    }

export default React.memo(UserMessage);