frontend/src/components/chat/ThinkingAnimation.tsx

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 flex-col items-start gap-2 px-4 py-3">
      <div className="thinking-brain">
        <svg viewBox="0 0 24 24" width="24" height="24" className="thinking-brain-svg">
          <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2h5Z" 
            className="fill-financial-accent/20 stroke-financial-accent stroke-[1.5]" />
          <path d="M12 4.5A2.5 2.5 0 0 1 14.5 2h5A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 12 19.5v-15Z" 
            className="fill-financial-accent/10 stroke-financial-accent stroke-[1.5]" />
          <path d="M6 12h4" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M14 12h4" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M13.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M16.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M13.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M16.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M9.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M6.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M9.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M6.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
        </svg>
        <div className="thinking-waves">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <span className="text-sm font-medium text-muted-foreground 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' : ''}`}
            ></span>
          ))}
        </span>
      </span>
    </div>
  );
};