import { useEffect, useState } from 'react';

export interface StreamingMessageProps {
	content: string;
	isStreaming?: boolean;
	className?: string;
}

export function StreamingMessage({ content, isStreaming = false, className = '' }: StreamingMessageProps) {
	const [displayedContent, setDisplayedContent] = useState('');

	useEffect(() => {
		if (isStreaming) {
			// Update displayed content as it streams
			setDisplayedContent(content);
		} else {
			// When streaming stops, show final content
			setDisplayedContent(content);
		}
	}, [content, isStreaming]);

	return (
		<div className={className}>
			<p className='text-sm whitespace-pre-wrap leading-relaxed text-gray-800'>{displayedContent}</p>
			{isStreaming && (
				<span className='inline-block w-2 h-4 bg-sidebar-bg ml-1 animate-pulse' aria-label='Streaming' />
			)}
		</div>
	);
}