import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AIAgent } from "@/types/agents";
import { Sparkles, Star } from "lucide-react";

interface AgentIntroCardProps {
  agent: AIAgent;
}

export function AgentIntroCard({ agent }: AgentIntroCardProps) {
  if (!agent) {
    return null;
  }

  return (
    <Card className="border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5">
      <CardContent className="p-4">
        <div className="flex items-start gap-4">
          {/* 助理头像 */}
          <Avatar className="w-12 h-12 flex-shrink-0 border-2 border-primary/20">
            <AvatarImage src={agent.avatar} alt={agent.name} />
            <AvatarFallback className={`${agent.color} text-white text-2xl`}>
              {agent.emoji}
            </AvatarFallback>
          </Avatar>
          
          {/* 助理信息 */}
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <h4 className="font-semibold text-foreground">{agent.name}</h4>
              <Badge variant="secondary" className="text-xs">
                {agent.role}
              </Badge>
              <Sparkles className="w-4 h-4 text-primary" />
            </div>
            
            <p className="text-sm text-muted-foreground mb-3">{agent.description}</p>
            
            {/* 专长标签 */}
            <div className="flex flex-wrap gap-1 mb-3">
              {agent.specialties.map((specialty, index) => (
                <Badge key={index} variant="outline" className="text-xs">
                  <Star className="w-3 h-3 mr-1" />
                  {specialty}
                </Badge>
              ))}
            </div>
            
            {/* 问候语 */}
            <div className="bg-background/80 rounded-lg p-3 border border-border/50">
              <p className="text-sm leading-relaxed">{agent.greeting}</p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
