import * as React from 'react';
import { cn } from '../utils/cn';

export interface StreamingTextProps extends React.HTMLAttributes<HTMLSpanElement> {
  text: string;
  isStreaming: boolean;
}

const StreamingText = React.forwardRef<HTMLSpanElement, StreamingTextProps>(
  ({ text, isStreaming, className, ...props }, ref) => {
    return (
      <span ref={ref} className={cn('whitespace-pre-wrap', className)} {...props}>
        {text}
        {isStreaming && (
          <span
            className="inline-block w-[2px] h-[1.1em] ml-0.5 bg-current align-text-bottom animate-[blink_1s_step-end_infinite]"
            style={{
              // Inline keyframes for cursor blink
              animation: 'blink 1s step-end infinite',
            }}
          />
        )}
        <style>{`
          @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
          }
        `}</style>
      </span>
    );
  }
);
StreamingText.displayName = 'StreamingText';

export { StreamingText };
