import React from 'react';

interface OrbProps {
  active: boolean;
  color: string;
  isSpeaking?: boolean;
}

const Orb: React.FC<OrbProps> = ({ active, color, isSpeaking }) => {
  return (
    <div className="relative w-48 h-48 flex items-center justify-center">
      <div 
        className={`absolute inset-0 rounded-full blur-2xl opacity-20 transition-all duration-1000 ${
          active ? 'scale-110' : 'scale-90'
        }`}
        style={{ backgroundColor: color }}
      />
      
      <div 
        className={`absolute inset-4 rounded-full border-2 opacity-30 transition-all duration-500 ${
          isSpeaking ? 'animate-ping' : ''
        }`}
        style={{ borderColor: color }}
      />
      
      <div 
        className={`relative w-24 h-24 rounded-full flex items-center justify-center shadow-2xl transition-all duration-500 ${
          active ? 'scale-105' : 'scale-100'
        }`}
        style={{ 
          background: `radial-gradient(circle at 30% 30%, white, ${color})`,
          boxShadow: `0 0 40px ${color}66`
        }}
      >
        <div className="w-16 h-16 rounded-full bg-slate-900/40 backdrop-blur-sm flex items-center justify-center">
           <div className={`w-8 h-1 bg-white/50 rounded-full transition-all duration-300 ${isSpeaking ? 'scale-y-110 h-8 rounded-lg' : 'scale-y-100 h-1'}`} />
        </div>
      </div>

      {active && (
        <div className="absolute inset-0 animate-spin-slow">
            <div className="absolute top-0 left-1/2 w-2 h-2 rounded-full -translate-x-1/2" style={{ backgroundColor: color }} />
        </div>
      )}
    </div>
  );
};

export default Orb;