import { Bot } from 'lucide-react';

export function TypingIndicator() {
  return (
    <div className="flex gap-3 message-enter">
      {/* Avatar */}
      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center">
        <Bot className="w-4 h-4 text-secondary-600" />
      </div>

      {/* Typing dots */}
      <div className="bg-secondary-100 rounded-2xl rounded-tl-sm px-4 py-3">
        <div className="flex items-center gap-1">
          <span className="w-2 h-2 bg-secondary-400 rounded-full typing-dot" />
          <span className="w-2 h-2 bg-secondary-400 rounded-full typing-dot" />
          <span className="w-2 h-2 bg-secondary-400 rounded-full typing-dot" />
        </div>
      </div>
    </div>
  );
}
