Comentarios.

<section class="ui-sample ui-document" data-comment-thread="true"><header><strong>Comentario sobre cláusula 4</strong><span class="badge badge--ok">Resuelto</span></header><p><b>Revisión legal</b> Aclaremos el período de vigencia.</p><p><b>Área comercial</b> Cambiado a doce meses desde la firma.</p><button class="btn btn--secondary" type="button">Responder</button></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-comment-thread="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Comentario sobre cláusula 4</strong><span class="badge badge--ok">Resuelto</span></header><p><b>Revisión legal</b> Aclaremos el período de vigencia.</p><p><b>Área comercial</b> Cambiado a doce meses desde la firma.</p><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Responder</button></section>

import type { MouseEventHandler } from "react";

export interface CommentThreadItem {
  /** Persona o equipo que escribió el comentario. */
  author: string;
  /** Texto del comentario. */
  text: string;
}

export interface CommentThreadProps {
  /** Qué se comenta («Comentario sobre cláusula 4»). */
  title?: string;
  /** Estado del hilo («Abierto», «Resuelto»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (resuelto: `ok`; abierto: `warn`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Comentarios del más antiguo al más reciente. */
  items?: CommentThreadItem[];
  /** Texto del botón para responder; vacío oculta el botón. */
  replyLabel?: string;
  /** Se llama al pulsar el botón de responder. */
  onReply?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const COMMENT_THREAD_TONOS: [string, "ok" | "warn" | "err"][] = [
  ["resuelto", "ok"],
  ["abierto", "warn"],
  ["pendiente", "warn"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? COMMENT_THREAD_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

const COMMENT_THREAD_ITEMS: CommentThreadItem[] = [
  { author: "Revisión legal", text: "Aclaremos el período de vigencia." },
  { author: "Área comercial", text: "Cambiado a doce meses desde la firma." },
];

/**
 * Hilo de comentarios sobre una parte de un documento, con su estado, cada comentario con su autor y un botón para responder; se usa en la revisión de contratos y borradores.
 *
 * El estado va en texto dentro de una etiqueta con tono (`badge`); responder es un botón secundario (`btn btn--secondary`).
 *
 * @example <CommentThread title="Comentario sobre cláusula 4" status="Abierto" onReply={responder} />
 * @example <CommentThread status="Resuelto" items={[{ author: "Revisión legal", text: "Aclaremos el período de vigencia." }]} replyLabel="" />
 */
export function CommentThread({
  title = "Comentario sobre cláusula 4",
  status = "Resuelto",
  statusTone,
  items = COMMENT_THREAD_ITEMS,
  replyLabel = "Responder",
  onReply,
  className,
}: CommentThreadProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-comment-thread>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      {items.map((item, i) => (
        <p key={`${item.author}-${i}`}>
          <b>{item.author}</b>
          {item.text ? ` ${item.text}` : null}
        </p>
      ))}
      {replyLabel ? <button className="btn btn--secondary" type="button" onClick={onReply}>{replyLabel}</button> : null}
    </section>
  );
}