import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

interface ScanPipelineSummaryProps {
  itemCount: number;
  repliesFetched?: boolean;
  repliesCount?: number;
  className?: string;
}

export function ScanPipelineSummary({
  itemCount,
  repliesFetched,
  repliesCount,
  className,
}: ScanPipelineSummaryProps) {
  return (
    <div
      className={cn(
        "flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground",
        className
      )}
    >
      <span className="inline-flex items-center gap-1 text-foreground">
        <Check className="h-3 w-3 text-success" />
        海巡 {itemCount} 篇
      </span>
      <span className="inline-flex items-center gap-1">
        <Check className={cn("h-3 w-3", repliesFetched ? "text-success" : "text-muted-foreground/40")} />
        {repliesFetched
          ? `留言 ${repliesCount ?? 0} 則`
          : "未抓留言"}
      </span>
    </div>
  );
}