Recibo de pago.

<article class="ui-sample ui-service" data-payment-receipt="true"><header><strong>Recibo de pago</strong><span class="badge badge--ok">Pagado</span></header><dl><div><dt>Recibo</dt><dd>PAY-2026-184</dd></div><div><dt>Total</dt><dd>$24.990 CLP</dd></div><div><dt>Fecha</dt><dd>25 ago 2026 · 17:08 CLT</dd></div><div><dt>Medio</dt><dd>Transferencia</dd></div></dl><a class="btn btn--secondary" href="#recibo">Descargar representación PDF</a></article>

<article class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-payment-receipt="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Recibo de pago</strong><span class="badge badge--ok">Pagado</span></header><dl class="grid gap-2"><div><dt>Recibo</dt><dd>PAY-2026-184</dd></div><div><dt>Total</dt><dd>$24.990 CLP</dd></div><div><dt>Fecha</dt><dd>25 ago 2026 · 17:08 CLT</dd></div><div><dt>Medio</dt><dd>Transferencia</dd></div></dl><a class="btn btn--secondary underline underline-offset-4" href="#recibo">Descargar representación PDF</a></article>

export interface PaymentReceiptItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para folios o identificadores que se copian tal cual. */
  monospace?: boolean;
}

/** Tono de la insignia de estado: `ok` pagado, `warn` pendiente o en validación, `err` rechazado o anulado, `neutral` sin tono. */
export type PaymentReceiptTone = "ok" | "warn" | "err" | "neutral";

export interface PaymentReceiptProps {
  title?: string;
  /** Estado del pago: pagado, pendiente o rechazado; va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Pagado» → `ok`, «Pendiente» → `warn`, «Rechazado» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: PaymentReceiptTone;
  /** Datos del pago: número de recibo, total, fecha y medio de pago. */
  items?: PaymentReceiptItem[];
  /** URL de descarga del recibo. */
  href?: string;
  /** Texto del enlace de descarga del recibo; vacío lo oculta. */
  linkLabel?: string;
  className?: string;
}

const ITEMS: PaymentReceiptItem[] = [
  { label: "Recibo", value: "PAY-2026-184" },
  { label: "Total", value: "$24.990 CLP" },
  { label: "Fecha", value: "25 ago 2026 · 17:08 CLT" },
  { label: "Medio", value: "Transferencia" },
];

const PAYMENT_RECEIPT_BADGE: Record<PaymentReceiptTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const PAYMENT_RECEIPT_TONES: [string, PaymentReceiptTone][] = [
  ["no pagado", "warn"],
  ["pagado", "ok"],
  ["pendiente", "warn"],
  ["en validación", "warn"],
  ["rechazado", "err"],
  ["anulado", "err"],
];

function paymentReceiptTone(status: string, tone?: PaymentReceiptTone): PaymentReceiptTone {
  const texto = status.toLowerCase();
  return tone ?? PAYMENT_RECEIPT_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? "neutral";
}

/**
 * Recibo de un pago con su estado, número, total, fecha y medio de pago, y un enlace para descargarlo; se usa en el historial de facturación y después de pagar.
 *
 * El estado va en texto dentro de una insignia con tono. Un pago pendiente todavía no tiene recibo para descargar: pasa `linkLabel=""`.
 *
 * @example <PaymentReceipt status="Pendiente" items={[{ label: "Recibo", value: "PAY-2026-185" }, { label: "Total", value: "$24.990 CLP" }, { label: "Medio", value: "Transferencia · en validación" }]} linkLabel="" />
 * @example <PaymentReceipt status="Pagado" href="/recibos/PAY-2026-184.pdf" />
 */
export function PaymentReceipt({
  title = "Recibo de pago",
  status = "Pagado",
  statusTone,
  items = ITEMS,
  href = "#recibo",
  linkLabel = "Descargar representación PDF",
  className,
}: PaymentReceiptProps) {
  return (
    <article className={["ui-service", className].filter(Boolean).join(" ")} data-payment-receipt>
      <header>
        <strong>{title}</strong>
        {status ? <span className={PAYMENT_RECEIPT_BADGE[paymentReceiptTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </article>
  );
}