import type { EvidenceItem } from '@ftb/shared';

export function EvidenceList({ items }: { items: EvidenceItem[] }) {
  if (items.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2">
      {items.map((item, index) => (
        <button
          key={`${item.label}-${index}`}
          type="button"
          className="rounded-full border border-[#e2e8f0] bg-white/70 px-3 py-1.5 text-[12px] text-[#334155] shadow-sm backdrop-blur disabled:cursor-default"
          disabled={!item.drilldown}
          title={item.sourceLabel ?? item.sourceDomain}
        >
          <span className="text-[#64748b]">{item.label}</span>
          <span className="ml-1 font-semibold text-[#0f172a]">
            {item.value}
            {item.unit ?? ''}
          </span>
        </button>
      ))}
    </div>
  );
}