Resumen de compra.

<section class="ui-sample ui-service" data-checkout-summary="true"><header><strong>Resumen de contratación</strong><span>Plan Equipo · mensual</span></header><dl><div><dt>Neto</dt><dd>$21.000</dd></div><div><dt>IVA 19%</dt><dd>$3.990</dd></div><div><dt>Total</dt><dd><strong>$24.990 CLP</strong></dd></div><div><dt>Renovación</dt><dd>25 sep 2026</dd></div></dl><button class="btn btn--primary" type="button">Confirmar y pagar $24.990</button></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-checkout-summary="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Resumen de contratación</strong><span>Plan Equipo · mensual</span></header><dl class="grid gap-2"><div><dt>Neto</dt><dd>$21.000</dd></div><div><dt>IVA 19%</dt><dd>$3.990</dd></div><div><dt>Total</dt><dd><strong>$24.990 CLP</strong></dd></div><div><dt>Renovación</dt><dd>25 sep 2026</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">Confirmar y pagar $24.990</button></section>

import type { MouseEventHandler } from "react";

export interface CheckoutSummaryItem {
  /** Concepto (`<dt>`): neto, impuesto, total, renovación. */
  label: string;
  value: string;
  /** Destaca el valor en `<strong>`; se usa para el total a pagar. */
  emphasis?: boolean;
}

export interface CheckoutSummaryProps {
  title?: string;
  /** Plan y período que se contrata («Plan Equipo · mensual»); vacío lo oculta. */
  plan?: string;
  /** Desglose del cobro como pares concepto y monto, con el total destacado. */
  items?: CheckoutSummaryItem[];
  /** Texto del botón que confirma el pago; conviene repetir el monto total. Vacío oculta el botón. */
  confirmLabel?: string;
  onConfirm?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const CHECKOUT_SUMMARY_ITEMS: CheckoutSummaryItem[] = [
  { label: "Neto", value: "$21.000" },
  { label: "IVA 19%", value: "$3.990" },
  { label: "Total", value: "$24.990 CLP", emphasis: true },
  { label: "Renovación", value: "25 sep 2026" },
];

/**
 * Resumen de una contratación antes de pagar, con el plan, el desglose de neto, impuesto y total, la renovación y el botón que confirma el pago.
 *
 * El total va destacado con `emphasis` y el botón, que es la acción principal (`btn--primary`), repite el monto que se cobrará.
 *
 * @example <CheckoutSummary plan="Plan Equipo · mensual" confirmLabel="Confirmar y pagar $24.990" onConfirm={pagar} />
 * @example <CheckoutSummary plan="Plan Equipo · anual" items={[{ label: "Neto", value: "$210.000" }, { label: "IVA 19%", value: "$39.900" }, { label: "Total", value: "$249.900 CLP", emphasis: true }, { label: "Renovación", value: "27 sep 2027" }]} confirmLabel="Confirmar y pagar $249.900" />
 */
export function CheckoutSummary({
  title = "Resumen de contratación",
  plan = "Plan Equipo · mensual",
  items = CHECKOUT_SUMMARY_ITEMS,
  confirmLabel = "Confirmar y pagar $24.990",
  onConfirm,
  className,
}: CheckoutSummaryProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-checkout-summary>
      <header>
        <strong>{title}</strong>
        {plan ? <span>{plan}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.emphasis ? <strong>{item.value}</strong> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {confirmLabel ? <button className="btn btn--primary" type="button" onClick={onConfirm}>{confirmLabel}</button> : null}
    </section>
  );
}