"use client";

import type { SourceRecordDto } from "@/lib/api/types";

interface SourcesMetricsProps {
  sources: SourceRecordDto[];
}

export function SourcesMetrics({ sources }: SourcesMetricsProps) {
  const activeCount = sources.filter((s) => s.status === "active").length;
  const deprecatedCount = sources.filter(
    (s) => s.status === "deprecated"
  ).length;
  const quarantinedCount = sources.filter(
    (s) => s.status === "quarantined"
  ).length;

  const metrics = [
    { label: "Total Sources", value: sources.length },
    { label: "Active", value: activeCount, color: "text-emerald-500" },
    { label: "Deprecated", value: deprecatedCount, color: "text-amber-500" },
    { label: "Quarantined", value: quarantinedCount, color: "text-red-500" },
  ];

  return (
    <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
      {metrics.map((metric) => (
        <div
          key={metric.label}
          className="rounded-lg border border-border bg-card p-4"
        >
          <p className="text-sm text-muted-foreground">{metric.label}</p>
          <p className={`text-2xl font-semibold ${metric.color ?? ""}`}>
            {metric.value}
          </p>
        </div>
      ))}
    </div>
  );
}
