Cláusula.

<section class="ui-sample ui-document" data-clause-block="true" id="clausula-cuarta-0"><header><strong>Cuarta. Vigencia</strong><a class="btn btn--icon" href="#clausula-cuarta-0" aria-label="Enlace a la cláusula Cuarta. Vigencia">§</a></header><p>El contrato tendrá una duración de seis meses desde la firma.</p><small>Última modificación: versión 3</small></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-clause-block="true" id="clausula-cuarta-0"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Cuarta. Vigencia</strong><a class="btn btn--icon underline underline-offset-4" href="#clausula-cuarta-0" aria-label="Enlace a la cláusula Cuarta. Vigencia">§</a></header><p>El contrato tendrá una duración de seis meses desde la firma.</p><small class="text-sm text-slate-600">Última modificación: versión 3</small></section>

import type { ReactNode } from "react";

export interface ClauseBlockProps {
  /** Id de la cláusula; el enlace de ancla apunta a `#${id}`. Usa uno distinto por cláusula en la página. */
  id?: string;
  /** Número y nombre de la cláusula («Cuarta. Vigencia»). */
  title?: string;
  /** Texto del enlace de ancla a la cláusula; vacío lo oculta. */
  anchorLabel?: string;
  /** Nombre accesible del enlace de ancla; por defecto, «Enlace a la cláusula» seguido del título. */
  anchorAriaLabel?: string;
  /** Texto de la cláusula; un texto se envuelve en un párrafo y uno vacío no se muestra. */
  children?: ReactNode;
  /** Nota al pie de la cláusula («Última modificación: versión 3»); vacía la oculta. */
  note?: string;
  className?: string;
}

/**
 * Cláusula de un contrato con título, enlace de ancla, texto y nota de la última modificación; se usa una por cláusula en el cuerpo del documento.
 *
 * El `id` permite enlazar la cláusula desde comentarios, cambios o un índice. El ancla es un botón de símbolo (`btn btn--icon`) con nombre accesible propio.
 *
 * @example <ClauseBlock id="clausula-cuarta" title="Cuarta. Vigencia" note="Última modificación: versión 4">El contrato tendrá una duración de doce meses desde la firma.</ClauseBlock>
 */
export function ClauseBlock({
  id = "clausula-cuarta-0",
  title = "Cuarta. Vigencia",
  anchorLabel = "§",
  anchorAriaLabel,
  children = "El contrato tendrá una duración de seis meses desde la firma.",
  note = "Última modificación: versión 3",
  className,
}: ClauseBlockProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-clause-block id={id}>
      {title || anchorLabel ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {anchorLabel ? (
            <a className="btn btn--icon" href={`#${id}`} aria-label={anchorAriaLabel ?? (title ? `Enlace a la cláusula ${title}` : "Enlace a la cláusula")}>
              {anchorLabel}
            </a>
          ) : null}
        </header>
      ) : null}
      {typeof children === "string" ? (children ? <p>{children}</p> : null) : children}
      {note ? <small>{note}</small> : null}
    </section>
  );
}