Bibliografía.

<section class="ui-sample ui-content" data-bibliography="true"><h3>Referencias</h3><ol><li>Instituto Nacional de Estadísticas. <cite>Boletín de empleo</cite>, 2026.</li><li>COCHID. <cite>Serie regional armonizada</cite>, versión 3.</li></ol></section>

<section class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-bibliography="true"><h3>Referencias</h3><ol class="grid gap-2"><li>Instituto Nacional de Estadísticas. <cite>Boletín de empleo</cite>, 2026.</li><li>COCHID. <cite>Serie regional armonizada</cite>, versión 3.</li></ol></section>

export interface BibliographyItem {
  /** Autor o institución responsable de la obra; vacío deja la referencia sin autor. */
  author: string;
  /** Título de la obra; va en `<cite>`. */
  title: string;
  /** Año, versión o edición, sin punto final. */
  detail?: string;
  /** Enlace a la obra; si existe, el título se muestra como enlace. */
  href?: string;
}

export interface BibliographyProps {
  /** Título de la sección. */
  title?: string;
  /** Obras citadas, en el orden en que se numeran. */
  items?: BibliographyItem[];
  className?: string;
}

const BIBLIOGRAPHY_ITEMS: BibliographyItem[] = [
  { author: "Instituto Nacional de Estadísticas", title: "Boletín de empleo", detail: "2026" },
  { author: "COCHID", title: "Serie regional armonizada", detail: "versión 3" },
];

/**
 * Bibliografía: lista numerada de referencias con autor, título de la obra y año o versión, al final de un artículo o informe.
 *
 * Cada referencia se arma como «Autor. <cite>Título</cite>, detalle.»; con `href`, el título enlaza a la obra.
 *
 * @example <Bibliography items={[{ author: "Instituto Nacional de Estadísticas", title: "Boletín de empleo", detail: "2026" }, { author: "COCHID", title: "Metodología de normalización", detail: "versión 3" }]} />
 */
export function Bibliography({ title = "Referencias", items = BIBLIOGRAPHY_ITEMS, className }: BibliographyProps) {
  if (!items.length) return null;
  return (
    <section className={["ui-content", className].filter(Boolean).join(" ")} data-bibliography>
      {title ? <h3>{title}</h3> : null}
      <ol>
        {items.map((item, i) => (
          <li key={`${item.title}-${i}`}>
            {item.author ? `${item.author}. ` : null}
            <cite>{item.href ? <a href={item.href}>{item.title}</a> : item.title}</cite>
            {item.detail ? `, ${item.detail}.` : "."}
          </li>
        ))}
      </ol>
    </section>
  );
}