Cuerpo de artículo.

<article class="ui-sample ui-content" data-article-body><p>La escala de barrio permite comparar cambios que se pierden en un promedio comunal.</p><h3>Cómo se midió</h3><p>El análisis usa la misma unidad, período y cobertura para cada observación. Los vacíos se distinguen de los ceros.</p><p><a href="#fuente">Consulta la serie y su metodología</a>.</p></article>

<article class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-article-body><p>La escala de barrio permite comparar cambios que se pierden en un promedio comunal.</p><h3>Cómo se midió</h3><p>El análisis usa la misma unidad, período y cobertura para cada observación. Los vacíos se distinguen de los ceros.</p><p><a class="underline underline-offset-4" href="#fuente">Consulta la serie y su metodología</a>.</p></article>

import type { ReactNode } from "react";

export interface ArticleBodySection {
  /** Título de la sección, en `<h3>`; la primera sección suele no tenerlo. */
  title?: string;
  /** Párrafos de la sección, en orden; un párrafo vacío se omite. */
  paragraphs: string[];
}

export interface ArticleBodyLink {
  /** Texto del enlace; vacío omite el párrafo de cierre. */
  label: string;
  href: string;
}

const SECTIONS: ArticleBodySection[] = [
  { paragraphs: ["La escala de barrio permite comparar cambios que se pierden en un promedio comunal."] },
  {
    title: "Cómo se midió",
    paragraphs: ["El análisis usa la misma unidad, período y cobertura para cada observación. Los vacíos se distinguen de los ceros."],
  },
];

const LINK: ArticleBodyLink = { label: "Consulta la serie y su metodología", href: "#fuente" };

export interface ArticleBodyProps {
  /** Secciones del texto: título opcional y párrafos. */
  sections?: ArticleBodySection[];
  /** Enlace de cierre a la fuente o la metodología, como último párrafo terminado en punto; `null` lo omite. */
  link?: ArticleBodyLink | null;
  /** Cuerpo libre ya maquetado (por ejemplo, el resultado de un MDX); si lo pasas, reemplaza `sections` y `link`. Vacío vuelve a `sections`. */
  children?: ReactNode;
  className?: string;
}

/**
 * Cuerpo de artículo con párrafos, subtítulos y enlace final a la fuente; contiene el texto principal de una nota o informe.
 *
 * @example <ArticleBody sections={[{ paragraphs: ["La escala de barrio permite comparar cambios."] }, { title: "Qué cambió", paragraphs: ["El análisis usa la misma unidad."] }]} link={{ label: "Consulta la serie y su metodología", href: "/series/barrios" }} />
 * @example <ArticleBody>{contenidoMdx}</ArticleBody>
 */
export function ArticleBody({ sections = SECTIONS, link = LINK, children, className }: ArticleBodyProps) {
  const libre = !(children == null || children === false || children === "");
  const bloques = sections.flatMap((section, i) => [
    ...(section.title ? [<h3 key={`h-${i}`}>{section.title}</h3>] : []),
    ...section.paragraphs.filter(Boolean).map((texto, j) => <p key={`p-${i}-${j}`}>{texto}</p>),
  ]);
  const cierre = link?.label ? (
    <p>
      <a href={link.href}>{link.label}</a>.
    </p>
  ) : null;
  if (!libre && !bloques.length && !cierre) return null;
  return (
    <article className={["ui-content", className].filter(Boolean).join(" ")} data-article-body>
      {libre ? children : <>{bloques}{cierre}</>}
    </article>
  );
}