"use client";

interface Props {
  stats: { nodes: number; edges: number; files?: number; clusters?: number } | null;
}

function StatBadge({ value, label, color }: { value: number; label: string; color: string }) {
  return (
    <div
      className="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs"
      style={{ background: `${color}15`, color }}
    >
      <span className="font-bold mono">{value.toLocaleString()}</span>
      <span style={{ opacity: 0.7 }}>{label}</span>
    </div>
  );
}

export function StatsPanel({ stats }: Props) {
  if (!stats) {
    return (
      <div className="flex gap-2">
        {[1, 2].map((i) => (
          <div
            key={i}
            className="w-20 h-6 rounded-md pulse-glow"
            style={{ background: "var(--surface-2)" }}
          />
        ))}
      </div>
    );
  }

  return (
    <div className="flex gap-2">
      <StatBadge value={stats.nodes} label="nodes" color="var(--accent)" />
      <StatBadge value={stats.edges} label="edges" color="var(--cyan)" />
    </div>
  );
}