Lista de evidencia.

<section class="ui-sample ui-ai" data-evidence-list="true"><header><strong>Evidencia</strong><span>3 fuentes</span></header><ol><li><a href="#fuente-1">INE · boletín 2026-T2</a><span>primaria · respalda cifra</span></li><li><a href="#fuente-2">COCHID · serie normalizada</a><span>derivada · respalda comparación</span></li><li><a href="#fuente-3">Metodología ENE</a><span>primaria · respalda definición</span></li></ol></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-evidence-list="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Evidencia</strong><span>3 fuentes</span></header><ol class="grid gap-2"><li><a class="underline underline-offset-4" href="#fuente-1">INE · boletín 2026-T2</a><span>primaria · respalda cifra</span></li><li><a class="underline underline-offset-4" href="#fuente-2">COCHID · serie normalizada</a><span>derivada · respalda comparación</span></li><li><a class="underline underline-offset-4" href="#fuente-3">Metodología ENE</a><span>primaria · respalda definición</span></li></ol></section>

/** Tono de la insignia de estado de una fuente: `ok` verificada, `warn` por revisar, `err` descartada, `neutral` sin juicio. */
export type EvidenceListTone = "ok" | "warn" | "err" | "neutral";

export interface EvidenceListItem {
  /** Fuente citada (institución · publicación). */
  label: string;
  /** Destino de la fuente o de su ficha. */
  href: string;
  /** Tipo de fuente y qué respalda («primaria · respalda cifra»), o qué falta («la definición cambió en 2026»); vacío lo oculta. */
  description?: string;
  /** Estado de la fuente («Por revisar», «Verificada», «Descartada»); va en una insignia junto al enlace. Vacío la oculta. */
  status?: string;
  /** Tono de la insignia de `status`; por defecto, `neutral`. */
  statusTone?: EvidenceListTone;
}

export interface EvidenceListProps {
  title?: string;
  /** Cantidad de fuentes («3 fuentes»); por defecto, la cantidad de `items`. Vacío la oculta. */
  summary?: string;
  /** Fuentes en el orden en que se citan en la respuesta. */
  items?: EvidenceListItem[];
  className?: string;
}

const EVIDENCE_LIST_BADGE: Record<EvidenceListTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const EVIDENCE_LIST_ITEMS: EvidenceListItem[] = [
  { label: "INE · boletín 2026-T2", href: "#fuente-1", description: "primaria · respalda cifra" },
  { label: "COCHID · serie normalizada", href: "#fuente-2", description: "derivada · respalda comparación" },
  { label: "Metodología ENE", href: "#fuente-3", description: "primaria · respalda definición" },
];

/**
 * Lista numerada de las fuentes que respaldan una respuesta de IA, con el tipo de cada fuente y qué afirmación sostiene; se muestra bajo la respuesta o en un panel lateral.
 *
 * El orden de la lista es el de las llamadas en el texto. Una fuente sin respaldo suficiente lleva su estado en `status` («Por revisar», con `statusTone="warn"») y el motivo en `description`.
 *
 * @example <EvidenceList items={[{ label: "INE · boletín 2026-T2", href: "/fuentes/ine", description: "primaria · respalda cifra" }, { label: "COCHID · serie normalizada", href: "/fuentes/cochid", description: "derivada · respalda comparación" }]} />
 * @example <EvidenceList summary="2 fuentes · 1 por revisar" items={[{ label: "INE · boletín 2026-T2", href: "/fuentes/ine", description: "primaria · respalda cifra" }, { label: "Metodología ENE", href: "/fuentes/ene", status: "Por revisar", statusTone: "warn", description: "la definición cambió en 2026" }]} />
 */
export function EvidenceList({
  title = "Evidencia",
  summary,
  items = EVIDENCE_LIST_ITEMS,
  className,
}: EvidenceListProps) {
  const resumen = summary ?? `${items.length} ${items.length === 1 ? "fuente" : "fuentes"}`;
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-evidence-list>
      <header>
        <strong>{title}</strong>
        {resumen ? <span>{resumen}</span> : null}
      </header>
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.href}-${i}`}>
              <a href={item.href}>{item.label}</a>
              {item.status ? <>{" "}<span className={EVIDENCE_LIST_BADGE[item.statusTone ?? "neutral"]}>{item.status}</span></> : null}
              {item.description ? <span>{item.description}</span> : null}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}