// dashboard/src/components/agent/AnswerCard.tsx
// 最终答案卡片：展示 Agent 的最终回答
import { CheckCircle2 } from 'lucide-react';
import type { ColorScheme } from './constants';
import { AgentMarkdown } from './AgentMarkdown';

interface AnswerCardProps {
  content: string;
  colorScheme: ColorScheme;
  isStreaming?: boolean;
}

export function AnswerCard({
  content,
  colorScheme,
  isStreaming,
}: AnswerCardProps) {
  return (
    <div className="relative space-y-2">
      <div
        className={`absolute -left-[21px] top-3 w-2.5 h-2.5 rounded-full border-2 border-white ${colorScheme.answer}`}
      />
      <div className="flex flex-col items-start">
        <span className="text-[10px] font-bold text-tertiary px-1 flex items-center gap-1 mb-1">
          <CheckCircle2
            className={`w-3.5 h-3.5 text-success ${isStreaming ? 'animate-pulse' : ''}`}
          />
          <span>结论</span>
        </span>
        <div className="w-full rounded-2xl px-5 py-4 text-xs leading-relaxed font-semibold border bg-surface text-content border-subtle prose prose-sm max-w-none select-text prose-headings:text-content prose-headings:font-bold prose-strong:text-content prose-code:text-blueprint prose-img:rounded-lg">
          <AgentMarkdown>{content}</AgentMarkdown>
        </div>
      </div>
    </div>
  );
}