src/components/TypingIndicator.tsx

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>
  );
}