Estado de éxito.

<section class="ui-sample ui-feedback" data-success-state="true" role="status"><h3>Documento enviado a firma</h3><p>Dos firmantes recibieron el enlace.</p><a class="btn btn--secondary" href="#comprobante">Ver comprobante</a></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-success-state="true" role="status"><h3>Documento enviado a firma</h3><p>Dos firmantes recibieron el enlace.</p><a class="btn btn--secondary underline underline-offset-4" href="#comprobante">Ver comprobante</a></section>

export interface SuccessStateProps {
  /** Qué quedó hecho, en participio («Pago registrado»). */
  title?: string;
  /** Resultado concreto: a quién llegó, folio o comprobante. */
  description?: string;
  /** Texto del enlace al comprobante o al paso siguiente; vacío lo oculta. */
  linkLabel?: string;
  /** Destino del enlace. */
  href?: string;
  className?: string;
}

/**
 * Confirmación de una operación terminada, como un envío o un pago, con el resultado y un enlace al comprobante o al paso siguiente.
 *
 * Usa `role="status"`: se anuncia sin interrumpir.
 *
 * @example <SuccessState title="Documento enviado a firma" description="Dos firmantes recibieron el enlace." href="/firmas/184" />
 * @example <SuccessState title="Pago registrado" description="Recibo PAY-2026-184 disponible." linkLabel="Ver recibo" href="/recibos/PAY-2026-184" />
 */
export function SuccessState({
  title = "Documento enviado a firma",
  description = "Dos firmantes recibieron el enlace.",
  linkLabel = "Ver comprobante",
  href = "#comprobante",
  className,
}: SuccessStateProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-success-state role="status">
      {title ? <h3>{title}</h3> : null}
      {description ? <p>{description}</p> : null}
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}