import React, { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useCurrentConversationState } from '../../contexts/ChatContext';

function ThinkingAnimation({
  initialText = "Thinking",
  label: labelOverride,
  className = '',
}: {
  initialText?: string;
  label?: string;
  className?: string;
}) {
  const conv = useCurrentConversationState();
  const label = labelOverride || conv?.statusLabel || initialText;
  const [dots, setDots] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setDots(d => (d + 1) % 4), 400);
    return () => clearInterval(id);
  }, [label]);

  return (
    <div className={`flex items-center space-x-3 px-4 my-4 ${className}`.trim()}>
      <motion.div
        className="w-2 h-2 rounded-full bg-gray-600 dark:bg-gray-400"
        animate={{ opacity: [0.3, 1, 0.3], scale: [0.9, 1, 0.9] }}
        transition={{ duration: 0.8, repeat: Infinity }}
      />
      <span className="text-sm sm:text-[0.95rem] font-medium text-gradient-gray">
        {label}
        {'.'.repeat(dots)}
      </span>
    </div>
  )
}

export default React.memo(ThinkingAnimation);