import React from 'react';
import { Message } from '../../../types/fusemind/messages';

interface ChatBubbleProps {
    message: Message | null;
    position: 'left' | 'right';
    bgColor?: string;
    isVisible?: boolean;
}

const ChatBubble: React.FC<ChatBubbleProps> = ({
    message,
    position,
    bgColor = 'white',
    isVisible = true
}) => {
    const getBubblePositionClasses = () => {
        const baseClasses = "relative rounded-lg shadow-sm p-3 max-w-[70%]";
        const positionClass = position === 'right' ? 'ml-[30%]' : 'ml-[30%]';
        const animationClasses = `transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'}`;

        return `${baseClasses} ${positionClass} ${animationClasses}`;
    };

    const formatTime = (date: Date) => {
        return date.toLocaleTimeString('en-US', {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        });
    };

    if (!message) return null;

    return (
        <div
            className={getBubblePositionClasses()}
            style={{ backgroundColor: bgColor }}
        >
            <div className="relative">
                <div className="relative z-10">
                    <p className="text-[13px] leading-[18px] text-[#f8fafa] whitespace-pre-wrap break-words mb-1">
                        {message.content}
                    </p>
                    <p className="text-[10px] text-[#e0f1f1] text-right">
                        {formatTime(message.timestamp)}
                    </p>
                </div>
            </div>
        </div>
    );
};

export default ChatBubble; 