import { Bot } from 'lucide-react';
import { motion } from 'framer-motion';

export default function TypingIndicator() {
  return (
    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="flex items-center gap-3">
      <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-cyan-400/25 bg-cyan-500/10">
        <Bot className="h-4 w-4 text-cyan-200" />
      </span>
      <div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
        <span className="text-xs text-slate-500">IBM Bob is reasoning</span>
        <div className="flex gap-1">
          {[0, 1, 2].map((item) => (
            <motion.span
              key={item}
              animate={{ y: [0, -4, 0] }}
              transition={{ duration: 0.6, delay: item * 0.12, repeat: Infinity }}
              className="h-1.5 w-1.5 rounded-full bg-cyan-300"
            />
          ))}
        </div>
      </div>
    </motion.div>
  );
}