Cita y procedencia.

<aside class="ui-sample ui-ai" data-citation="true" id="cite-0"><p>La desocupación regional alcanzó 8,4%<a href="#fuente-ine"><sup>[1]</sup><span class="sr-only">Fuente 1</span></a>.</p><footer><strong>[1] INE</strong> · Boletín de empleo, may-jul 2026 · <a href="#fuente-ine">Abrir fuente</a></footer></aside>

<aside class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-citation="true" id="cite-0"><p>La desocupación regional alcanzó 8,4%<a class="underline underline-offset-4" href="#fuente-ine"><sup>[1]</sup><span class="sr-only">Fuente 1</span></a>.</p><footer class="flex flex-wrap items-center justify-between gap-3"><strong>[1] INE</strong> · Boletín de empleo, may-jul 2026 · <a class="underline underline-offset-4" href="#fuente-ine">Abrir fuente</a></footer></aside>

export interface CitationProps {
  /** Id del bloque, para enlazar a la cita desde otra parte de la página. */
  id?: string;
  /** Afirmación citada; la llamada va pegada a la última palabra, antes del signo de puntuación final («8,4%[1].»). */
  text?: string;
  /** Número de la llamada; se muestra como «[1]» en el texto y en la referencia. */
  number?: number | string;
  /** Texto para lectores de pantalla de la llamada; por defecto, «Fuente» y el número. */
  markerLabel?: string;
  /** Institución o autor de la fuente («INE»). */
  source?: string;
  /** Publicación y período citados («Boletín de empleo, may-jul 2026»); vacío lo oculta. */
  description?: string;
  /** Destino de la fuente; lo usan la llamada y el enlace de la referencia. */
  href?: string;
  /** Texto del enlace a la fuente; vacío lo oculta. */
  linkLabel?: string;
  /** Ubicación exacta dentro de la fuente («página 4», «cuadro 2»); vacío la oculta. */
  locator?: string;
  className?: string;
}

/**
 * Afirmación de una respuesta de IA con su llamada numerada y la referencia a la fuente (institución, publicación, ubicación y enlace); se usa cuando una cifra o un dato necesita procedencia verificable.
 *
 * La llamada es un enlace a la fuente con un texto oculto para lectores de pantalla («Fuente 1»).
 *
 * @example <Citation text="La desocupación regional alcanzó 8,4%." source="INE" description="Boletín de empleo, may-jul 2026" href="/fuentes/ine" />
 * @example <Citation id="cita-2" number={2} text="La serie se normalizó por población." source="COCHID" description="Serie normalizada 2026" href="/fuentes/cochid" locator="nota metodológica" />
 */
export function Citation({
  id = "cite-0",
  text = "La desocupación regional alcanzó 8,4%.",
  number = 1,
  markerLabel,
  source = "INE",
  description = "Boletín de empleo, may-jul 2026",
  href = "#fuente-ine",
  linkLabel = "Abrir fuente",
  locator,
  className,
}: CitationProps) {
  const [, afirmacion = "", cierre = ""] = /^([\s\S]*?)\s*([.,;:!?…]*)\s*$/.exec(text) ?? [];
  const llamada = (
    <>
      <sup>{`[${number}]`}</sup>
      <span className="sr-only">{markerLabel ?? `Fuente ${number}`}</span>
    </>
  );
  return (
    <aside className={["ui-ai", className].filter(Boolean).join(" ")} data-citation id={id}>
      <p>
        {afirmacion}
        {href ? <a href={href}>{llamada}</a> : llamada}
        {cierre}
      </p>
      <footer>
        <strong>{source ? `[${number}] ${source}` : `[${number}]`}</strong>
        {description ? ` · ${description}` : null}
        {locator ? ` · ${locator}` : null}
        {href && linkLabel ? <>{" · "}<a href={href}>{linkLabel}</a></> : null}
      </footer>
    </aside>
  );
}