import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bot } from "lucide-react";
import { cn } from "@/lib/utils";
import { AIAgent } from "@/types/agents";

interface TypingIndicatorProps {
  agent?: AIAgent;
}

export function TypingIndicator({ agent }: TypingIndicatorProps) {
  return (
    <div className="flex gap-4 p-4 message-enter">
      {/* AI Avatar */}
      <div className="relative">
        <Avatar className="h-8 w-8 shrink-0 bg-transparent">
          <AvatarFallback className={cn(
            "text-white text-base font-medium flex items-center justify-center",
            agent ? agent.color : "bg-ai"
          )}>
            {agent ? (
              <span className="text-base">{agent.avatar}</span>
            ) : (
              <Bot className="h-4 w-4" />
            )}
          </AvatarFallback>
        </Avatar>
        {/* 在线状态指示器 */}
        <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
      </div>

      {/* Typing Animation */}
      <div className="inline-block bg-surface border border-border rounded-2xl px-4 py-3">
        <div className="flex items-center space-x-1">
          <div className="flex space-x-1">
            <div className="w-2 h-2 bg-muted-foreground rounded-full animate-pulse" 
                 style={{ animationDelay: '0ms', animationDuration: '1.4s' }}></div>
            <div className="w-2 h-2 bg-muted-foreground rounded-full animate-pulse" 
                 style={{ animationDelay: '200ms', animationDuration: '1.4s' }}></div>
            <div className="w-2 h-2 bg-muted-foreground rounded-full animate-pulse" 
                 style={{ animationDelay: '400ms', animationDuration: '1.4s' }}></div>
          </div>
          <span className="text-sm text-muted-foreground ml-2">
            {agent ? `${agent.name}正在思考...` : "AI正在思考..."}
          </span>
        </div>
      </div>
    </div>
  );
}