import { CyreneAvatar } from '@/components/persona/CyreneAvatar';

export function TypingIndicator() {
  return (
    <div className="flex px-4 py-2 gap-3">
      <CyreneAvatar size="sm" className="flex-shrink-0 mt-1" />
      <div className="bg-white dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm border border-pink-100 dark:border-pink-900">
        <p className="text-xs text-pink-400 mb-1.5 font-medium">昔涟正在输入...</p>
        <div className="flex gap-1.5">
          <span
            className="w-2 h-2 rounded-full bg-pink-300 animate-bounce"
            style={{ animationDelay: '0ms' }}
          />
          <span
            className="w-2 h-2 rounded-full bg-pink-400 animate-bounce"
            style={{ animationDelay: '150ms' }}
          />
          <span
            className="w-2 h-2 rounded-full bg-pink-500 animate-bounce"
            style={{ animationDelay: '300ms' }}
          />
        </div>
      </div>
    </div>
  );
}
