import { ExternalLink } from "lucide-react";
import { FmConfidence } from "./badges";
import type { ExternalSource } from "@/lib/fm-types";

export function FmExternalSources({ sources }: { sources?: ExternalSource[] }) {
  if (!sources || sources.length === 0) return null;
  return (
    <ul className="space-y-2 mt-1">
      {sources.map((s, i) => (
        <li key={i} className="border-l-2 border-[rgba(0,255,156,0.32)] pl-3 py-1">
          <a
            href={s.url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-[#7fdbff] hover:text-[#00ff9c] inline-flex items-start gap-1 text-sm font-medium"
          >
            <span>{s.title || s.url}</span>
            <ExternalLink size={12} className="shrink-0 mt-0.5" />
          </a>
          <div className="text-[10px] text-[#8896aa] mt-1 flex items-center gap-2 font-mono">
            {s.publisher && <span>{s.publisher}</span>}
            {s.reliability_band && <FmConfidence band={s.reliability_band} />}
            {s.accessed_at && <span className="text-[#5a6678]">·  {s.accessed_at.split("T")[0]}</span>}
          </div>
          {s.key_facts && s.key_facts.length > 0 && (
            <ul className="mt-1 text-xs text-[#c8d4e6] list-disc list-inside space-y-0.5">
              {s.key_facts.slice(0, 6).map((k, j) => <li key={j}>{k}</li>)}
            </ul>
          )}
        </li>
      ))}
    </ul>
  );
}