import { motion } from 'motion/react';
import { Bot, Crown } from 'lucide-react';

interface TypingIndicatorProps {
  isUnivAiPlusMode?: boolean;
}

export function TypingIndicator({ isUnivAiPlusMode }: TypingIndicatorProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="flex items-start gap-3 mb-4"
    >
      <div className={`
        flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300
        ${isUnivAiPlusMode
          ? 'bg-gradient-to-r from-purple-400 to-pink-500 text-white shadow-lg shadow-purple-500/30'
          : 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white shadow-lg shadow-yellow-500/30'
        }
      `}>
        {isUnivAiPlusMode ? <Crown size={20} /> : <Bot size={20} />}
      </div>
      
      <div className={`
        px-4 py-3 rounded-2xl backdrop-blur-sm border shadow-sm mr-4 transition-all duration-300
        ${isUnivAiPlusMode
          ? 'border-purple-200 bg-gradient-to-r from-white to-purple-50 text-purple-900'
          : 'border-yellow-200 bg-gradient-to-r from-white to-yellow-50 text-red-900'
        }
      `}>
        <div className="flex space-x-1">
          <motion.div
            className={`w-2 h-2 rounded-full ${
              isUnivAiPlusMode ? 'bg-purple-500/80' : 'bg-red-500/80'
            }`}
            animate={{ y: [0, -5, 0] }}
            transition={{ duration: 0.6, repeat: Infinity, delay: 0 }}
          />
          <motion.div
            className={`w-2 h-2 rounded-full ${
              isUnivAiPlusMode ? 'bg-pink-500/80' : 'bg-orange-500/80'
            }`}
            animate={{ y: [0, -5, 0] }}
            transition={{ duration: 0.6, repeat: Infinity, delay: 0.1 }}
          />
          <motion.div
            className={`w-2 h-2 rounded-full ${
              isUnivAiPlusMode ? 'bg-amber-500/80' : 'bg-yellow-500/80'
            }`}
            animate={{ y: [0, -5, 0] }}
            transition={{ duration: 0.6, repeat: Infinity, delay: 0.2 }}
          />
        </div>
      </div>
    </motion.div>
  );
}