frontend/src/components/ai-tutor/TutorAvatar.tsx

import React, { useState, useEffect } from 'react';

const TutorAvatar = ({ state = 'neutral', speaking = false }) => {
  const [isBlinking, setIsBlinking] = useState(false);

  useEffect(() => {
    const blinkInterval = setInterval(() => {
      setIsBlinking(true);
      setTimeout(() => setIsBlinking(false), 200);
    }, Math.random() * 4000 + 2000);
    
    return () => clearInterval(blinkInterval);
  }, []);

  return (
    <div className="flex justify-center items-center p-4">
      <svg viewBox="0 0 100 100" className="w-32 h-32 transition-transform duration-300 hover:scale-110">
        <circle cx="50" cy="50" r="45" className="fill-blue-500" />
        
        {isBlinking ? (
          <g>
            <line x1="30" y1="40" x2="40" y2="40" stroke="white" strokeWidth="3" />
            <line x1="60" y1="40" x2="70" y2="40" stroke="white" strokeWidth="3" />
          </g>
        ) : (
          <g>
            <circle cx="35" cy="40" r="5" fill="white" />
            <circle cx="65" cy="40" r="5" fill="white" />
          </g>
        )}
        
        <path
          d={
            state === 'happy'
              ? 'M 30 60 Q 50 80 70 60'
              : state === 'thinking'
              ? 'M 30 65 Q 50 65 70 65'
              : 'M 30 60 Q 50 70 70 60'
          }
          stroke="white"
          fill="none"
          strokeWidth="3"
          className={speaking ? 'animate-bounce' : ''}
        />
      </svg>
    </div>
  );
};

export default TutorAvatar;