"use client";
import { Database } from "lucide-react";
import type { AnalysisSource } from "@/lib/services/analysis-schema";

export function SourceFooter({ sources }: { sources: AnalysisSource[] }) {
  return (
    <div className="bg-slate-50 rounded-xl border border-slate-200 px-4 py-3">
      <div className="flex items-center gap-2 mb-2">
        <Database className="w-3.5 h-3.5 text-slate-400" />
        <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Data Sources</p>
      </div>
      <div className="space-y-1.5">
        {sources.map(s => (
          <div key={s.id} className="flex items-center justify-between text-[11px]">
            <div className="flex items-center gap-2">
              <span className={`w-1.5 h-1.5 rounded-full ${s.status === "available" ? "bg-green-500" : s.status === "partial" ? "bg-amber-400" : s.status === "stale" ? "bg-amber-400" : "bg-slate-300"}`} />
              <span className="text-slate-600">{s.label}</span>
            </div>
            <div className="flex items-center gap-2 text-slate-400">
              {s.status === "available" && s.recordCount !== undefined && <span>{s.recordCount.toLocaleString()} records</span>}
              {s.status === "available" && s.dateRange && <span>{s.dateRange.start} → {s.dateRange.end}</span>}
              {s.status === "partial" && s.recordCount === 0 && <span className="text-amber-500">Connected — awaiting data</span>}
              {s.status === "partial" && (s.recordCount ?? 0) > 0 && <span className="text-amber-500">{s.recordCount} records (partial)</span>}
              {s.status === "stale" && <span className="text-amber-500">Connected — data may be stale</span>}
              {s.status === "missing" && <span className="text-slate-300">Not connected</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
