Encabezado de artículo.

<header class="ui-sample ui-content" data-article-header="true"><h2>Santiago cambia a escala de barrio</h2><p>Un recorrido por las decisiones que cambian el espacio público y su evidencia.</p><div><a rel="author" href="#autor">Sebastián Illanes</a> · <time dateTime="2026-08-25">25 de agosto de 2026</time> · 4 min</div></header>

<header class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center justify-between gap-3" data-article-header="true"><h2>Santiago cambia a escala de barrio</h2><p>Un recorrido por las decisiones que cambian el espacio público y su evidencia.</p><div><a class="underline underline-offset-4" rel="author" href="#autor">Sebastián Illanes</a> · <time dateTime="2026-08-25">25 de agosto de 2026</time> · 4 min</div></header>

import type { ReactNode } from "react";

export interface ArticleHeaderAuthor {
  /** Nombre visible; vacío omite al autor. */
  name: string;
  /** Página de la persona o del equipo; sin enlace, el nombre va como texto. */
  href?: string;
}

const AUTHORS: ArticleHeaderAuthor[] = [{ name: "Sebastián Illanes", href: "#autor" }];

export interface ArticleHeaderProps {
  /** Título del artículo. */
  title?: string;
  /** Bajada: una o dos oraciones que resumen el artículo; vacía no se muestra. */
  description?: string;
  /** Autores en orden de firma; se unen con comas y «y». Una lista vacía omite la autoría. */
  authors?: ArticleHeaderAuthor[];
  /** Fecha de publicación en ISO 8601 (atributo `dateTime`). */
  dateTime?: string;
  /** Texto visible de la fecha dentro de `<time>`; vacío la oculta. */
  time?: string;
  /** Tiempo estimado de lectura («4 min»); vacío lo oculta. */
  readingTime?: string;
  className?: string;
}

function firmas(authors: ArticleHeaderAuthor[]): ReactNode[] {
  return authors.flatMap((author, i) => [
    i === 0 ? null : i === authors.length - 1 ? " y " : ", ",
    author.href ? <a rel="author" href={author.href} key={i}>{author.name}</a> : author.name,
  ]);
}

/**
 * Encabezado de artículo con título, bajada y línea de autoría, fecha y tiempo de lectura; va al inicio de una nota, crónica o ensayo.
 *
 * Autoría, fecha y tiempo de lectura van en una línea separada por « · »; cada parte vacía se omite.
 *
 * @example <ArticleHeader title="Una decisión explicada con evidencia" authors={[{ name: "Sebastián Illanes", href: "/autores/sebastian" }]} dateTime="2026-08-25" time="25 de agosto de 2026" readingTime="4 min" />
 */
export function ArticleHeader({
  title = "Santiago cambia a escala de barrio",
  description = "Un recorrido por las decisiones que cambian el espacio público y su evidencia.",
  authors = AUTHORS,
  dateTime = "2026-08-25",
  time = "25 de agosto de 2026",
  readingTime = "4 min",
  className,
}: ArticleHeaderProps) {
  const firmantes = authors.filter((author) => author.name);
  const partes: ReactNode[] = [];
  if (firmantes.length) partes.push(firmas(firmantes));
  if (time) partes.push(<time dateTime={dateTime || undefined} key="fecha">{time}</time>);
  if (readingTime) partes.push(readingTime);
  if (!title && !description && !partes.length) return null;
  return (
    <header className={["ui-content", className].filter(Boolean).join(" ")} data-article-header>
      {title ? <h2>{title}</h2> : null}
      {description ? <p>{description}</p> : null}
      {partes.length ? <div>{partes.flatMap((parte, i) => (i ? [" · ", parte] : [parte]))}</div> : null}
    </header>
  );
}