frontend/src/components/LottieMicAnimation.tsx

import React, { useEffect, useRef } from 'react';
import Lottie, { LottieRefCurrentProps } from 'lottie-react';
import micAnimation from '../assets/mic-animation.json';

interface LottieMicAnimationProps {
  isListening: boolean;
}

const LottieMicAnimation: React.FC<LottieMicAnimationProps> = ({ isListening }) => {
  const lottieRef = useRef<LottieRefCurrentProps>(null);
  
  useEffect(() => {
    if (lottieRef.current) {
      if (isListening) {
        lottieRef.current.play();
      } else {
        lottieRef.current.stop();
      }
    }
  }, [isListening]);

  return (
    <div className="relative w-36 h-36 mx-auto overflow-hidden">
      {/* Enhanced background glow effect with gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 via-blue-500/15 to-pink-500/20 rounded-full blur-3xl z-0 animate-pulse"></div>
      
      {/* Pulse ring animation */}
      <div className={`absolute inset-4 rounded-full border-2 border-purple-500/30 z-0 ${isListening ? 'animate-ping' : 'opacity-0'} transition-opacity duration-300`}></div>
      
      <Lottie
        lottieRef={lottieRef}
        animationData={micAnimation}
        loop={true}
        autoplay={isListening}
        className="w-full h-full z-10 relative"
        style={{ 
          filter: isListening ? 'drop-shadow(0 0 12px rgba(168, 85, 247, 0.5))' : 'none',
          transition: 'filter 0.3s ease-in-out'
        }}
      />
    </div>
  );
};

export default LottieMicAnimation;