import { CheckCircle2, LoaderCircle, XCircle } from "lucide-react";
import { StatusIcon, type StatusTone } from "@/shared/ui/status";
import type { AgentChatProgress } from "../types";

const states = {
  completed: { label: "已完成", tone: "success", Icon: CheckCircle2 },
  error: { label: "失败", tone: "danger", Icon: XCircle },
  running: { label: "进行中", tone: "info", Icon: LoaderCircle }
} satisfies Record<
  AgentChatProgress["status"],
  { label: string; tone: StatusTone; Icon: typeof CheckCircle2 }
>;

/** Ordinary steps and tool calls share the same status glyph, size and tone. */
export function AgentProgressStatusIcon({ status }: { status: AgentChatProgress["status"] }) {
  const { label, tone, Icon } = states[status];
  return (
    <StatusIcon
      data-progress-status={status}
      role="img"
      aria-label={label}
      tone={tone}
      activity={status === "running" ? "loading" : "static"}
      shape="circle"
      size="sm"
      className="border-0"
    >
      <Icon className="size-3.5" aria-hidden="true" />
    </StatusIcon>
  );
}