import { useRef } from "react";
import { captionWords, continuesCaption } from "../../lib/voice-aurora";

/** Live caption whose new words fade in as they are heard or spoken. */
export function VoiceLiveText({ text, reducedMotion }: { text: string; reducedMotion: boolean }) {
  const shown = useRef({ text: "", utterance: 0 });
  if (shown.current.text !== text) {
    shown.current = {
      text,
      utterance: continuesCaption(shown.current.text, text)
        ? shown.current.utterance
        : shown.current.utterance + 1,
    };
  }
  const { utterance } = shown.current;

  return (
    <p
      dir="auto"
      className="text-balance text-center text-ui-title font-medium leading-snug text-foreground"
    >
      {captionWords(text).map((word, index) => (
        <span key={`${utterance}-${index}`} className={reducedMotion ? undefined : "voice-word-in"}>
          {index ? " " : ""}
          {word}
        </span>
      ))}
    </p>
  );
}