import React, { memo } from 'react';
import { Sparkles, Brain, Zap } from 'lucide-react';

const AIThinking = memo(({ className = '' }) => {
    return (
        <div className={`flex items-center space-x-3 ${className}`} role="status" aria-label="AI is thinking">
            {/* Animated AI Avatar */}
            <div className="relative">
                <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-violet-500 via-violet-600 to-fuchsia-500 flex items-center justify-center shadow-lg shadow-violet-500/30 animate-glow-pulse" aria-hidden="true">
                    <Sparkles className="w-5 h-5 text-white" />
                </div>
                {/* Orbiting dots */}
                <div className="absolute inset-0 flex items-center justify-center" aria-hidden="true">
                    <div className="w-14 h-14 border border-violet-300/30 rounded-2xl animate-ping" style={{ animationDuration: '2s' }} />
                </div>
            </div>

            {/* Thinking Animation */}
            <div className="flex items-center space-x-3 bg-white/10 backdrop-blur-md rounded-2xl px-5 py-3 border border-white/10 shadow-soft">
                {/* Animated bars */}
                <div className="flex items-end space-x-1 h-5" aria-hidden="true">
                    {[0, 1, 2].map((i) => (
                        <div
                            key={i}
                            className="w-1.5 bg-gradient-to-t from-violet-400 to-fuchsia-400 rounded-full animate-bounce"
                            style={{
                                height: '100%',
                                animationDuration: '0.6s',
                                animationDelay: `${i * 0.15}s`,
                                transform: 'scaleY(0.4)',
                                transformOrigin: 'bottom',
                            }}
                        />
                    ))}
                </div>

                <span className="text-sm font-medium text-slate-300">Sarthi is thinking</span>

                {/* Brain icon with pulse */}
                <div className="relative" aria-hidden="true">
                    <Brain className="w-4 h-4 text-violet-400" />
                    <div className="absolute inset-0 w-full h-full">
                        <Zap className="w-2 h-2 text-amber-400 absolute -top-1 -right-1 animate-pulse" />
                    </div>
                </div>
            </div>
        </div>
    );
});

AIThinking.displayName = 'AIThinking';

export default AIThinking;