Solicitud de aprobación.

<section class="ui-sample ui-ai" data-approval-request="true"><header><strong>Aprobación humana requerida</strong><span>Mutación externa</span></header><p>Se enviará el documento FYD-184 a dos firmantes.</p><dl><div><dt>Impacto</dt><dd>Correo externo y registro de firma</dd></div><div><dt>Solicitante</dt><dd>Agente documental</dd></div></dl><button class="btn btn--primary" type="button">Aprobar envío</button><button class="btn btn--secondary" type="button">Rechazar</button></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-approval-request="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Aprobación humana requerida</strong><span>Mutación externa</span></header><p>Se enviará el documento FYD-184 a dos firmantes.</p><dl class="grid gap-2"><div><dt>Impacto</dt><dd>Correo externo y registro de firma</dd></div><div><dt>Solicitante</dt><dd>Agente documental</dd></div></dl><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Aprobar envío</button><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">Rechazar</button></section>

import type { MouseEventHandler } from "react";

export interface ApprovalRequestItem {
  /** Nombre del dato (`<dt>`): impacto, solicitante, destino. */
  label: string;
  value: string;
}

export interface ApprovalRequestProps {
  title?: string;
  /** Tipo de acción que pide la aprobación («Mutación externa», «Pago»); vacío lo oculta. */
  kind?: string;
  /** Qué hará el agente si se aprueba, con el objeto y el destino concretos; vacío lo oculta. */
  description?: string;
  /** Datos para decidir, como pares etiqueta y valor: impacto, solicitante. */
  items?: ApprovalRequestItem[];
  /** Texto del botón que aprueba; nombra la acción («Aprobar envío»). Vacío lo oculta. */
  approveLabel?: string;
  onApprove?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que rechaza; vacío lo oculta. */
  rejectLabel?: string;
  onReject?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const APPROVAL_REQUEST_ITEMS: ApprovalRequestItem[] = [
  { label: "Impacto", value: "Correo externo y registro de firma" },
  { label: "Solicitante", value: "Agente documental" },
];

/**
 * Solicitud de aprobación humana antes de que un agente de IA ejecute una acción con efecto externo (enviar, pagar, publicar), con su impacto, quién la pide y los botones para aprobar o rechazar.
 *
 * Ejecuta la acción sólo desde `onApprove`. El botón que aprueba es la acción principal (`btn--primary`) y nombra la acción concreta («Aprobar envío», no «Aceptar»); el que rechaza es secundario.
 *
 * @example <ApprovalRequest description="Se enviará el documento FYD-184 a dos firmantes." onApprove={aprobar} onReject={rechazar} />
 * @example <ApprovalRequest kind="Pago" description="Se pagará la factura 1842 a Proveedor SpA." items={[{ label: "Monto", value: "$184.000" }, { label: "Destino", value: "Cuenta corriente de Proveedor SpA" }, { label: "Solicitante", value: "Agente contable" }]} approveLabel="Aprobar pago" onApprove={aprobar} onReject={rechazar} />
 */
export function ApprovalRequest({
  title = "Aprobación humana requerida",
  kind = "Mutación externa",
  description = "Se enviará el documento FYD-184 a dos firmantes.",
  items = APPROVAL_REQUEST_ITEMS,
  approveLabel = "Aprobar envío",
  onApprove,
  rejectLabel = "Rechazar",
  onReject,
  className,
}: ApprovalRequestProps) {
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-approval-request>
      <header>
        <strong>{title}</strong>
        {kind ? <span>{kind}</span> : null}
      </header>
      {description ? <p>{description}</p> : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {approveLabel ? <button className="btn btn--primary" type="button" onClick={onApprove}>{approveLabel}</button> : null}
      {rejectLabel ? <button className="btn btn--secondary" type="button" onClick={onReject}>{rejectLabel}</button> : null}
    </section>
  );
}