frontend/src/components/chat/ThinkingAnimation.tsx

import { Brain } from "lucide-react";
import { useState, useEffect } from "react";

export const ThinkingAnimation = () => {
  const [dots, setDots] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setDots((prev) => (prev + 1) % 4);
    }, 400);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center gap-2 px-4 py-1">
      <div className="thinking-brain-svg relative flex items-center justify-center">
        <Brain className="h-4 w-4 text-financial-accent" />
        <div className="thinking-waves-enhanced flex items-center justify-center absolute inset-0">
          <span className="block absolute border-4 border-financial-accent/20 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_infinite]"></span>
          <span className="block absolute border-4 border-financial-accent/30 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_0.4s_infinite]"></span>
          <span className="block absolute border-4 border-financial-accent/40 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_0.8s_infinite]"></span>
        </div>
      </div>

      <span className="text-sm font-medium text-financial-accent flex items-center">
        Thinking
        <span className="thinking-dots-container ml-2">
          {Array(3).fill(0).map((_, i) => (
            <span
              key={i}
              className={`thinking-dot ${i <= dots ? 'thinking-dot-active bg-financial-accent' : 'bg-financial-accent/30'}`}
            ></span>
          ))}
        </span>
      </span>
    </div>
  );
};