Medio de pago.

<fieldset class="ui-sample ui-form" data-payment-method="true"><legend>Medio de pago</legend><label><input type="radio" name="payment-0" checked=""> Transferencia bancaria</label><label><input type="radio" name="payment-0"> Tarjeta terminada en 1842</label><small>No se realizará el cobro hasta confirmar.</small></fieldset>

<fieldset class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-payment-method="true"><legend>Medio de pago</legend><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="radio" name="payment-0" checked=""> Transferencia bancaria</label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="radio" name="payment-0"> Tarjeta terminada en 1842</label><small class="text-sm text-slate-600">No se realizará el cobro hasta confirmar.</small></fieldset>

import type { ChangeEventHandler } from "react";

/** Tono de la insignia de un medio: `ok` verificado, `warn` vencido o por actualizar, `err` rechazado, `neutral` sin tono. */
export type PaymentMethodTone = "ok" | "warn" | "err" | "neutral";

export interface PaymentMethodOption {
  /** Medio de pago como lo reconoce la persona («Tarjeta terminada en 1842»). */
  label: string;
  /** Valor enviado con el formulario; si falta, el radio se compara por su texto y el navegador envía «on». */
  value?: string;
  disabled?: boolean;
  /** Estado del medio («Vencida», «Predeterminado»); va en una insignia junto al texto y vacío no la muestra. */
  status?: string;
  /** Tono de la insignia del estado; sin valor es `neutral`. */
  statusTone?: PaymentMethodTone;
}

export interface PaymentMethodProps {
  /** Título del grupo. */
  legend?: string;
  /** Nombre compartido por los radios del grupo. Usa uno distinto por grupo en la página. */
  name?: string;
  /** Medios de pago disponibles, uno por radio. */
  options?: PaymentMethodOption[];
  /** Medio marcado al inicio en un grupo no controlado (el `value` de la opción o su texto). */
  defaultValue?: string;
  /** Medio marcado en un grupo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama al marcar un medio, también en un grupo no controlado. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Nota bajo las opciones: cuándo se cobra o qué falta para usar un medio; vacía se omite. */
  description?: string;
  className?: string;
}

const PAYMENT_METHOD_OPTIONS: PaymentMethodOption[] = [
  { label: "Transferencia bancaria" },
  { label: "Tarjeta terminada en 1842" },
];

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

/**
 * Grupo de radios para elegir el medio de pago de una contratación, con una nota sobre el cobro o el estado del medio elegido.
 *
 * Un medio que no se puede usar lleva `disabled` y su estado en una insignia (`status: "Vencida"`, `statusTone: "warn"`); la nota explica qué hacer.
 *
 * @example <PaymentMethod name="medio-pago" options={[{ label: "Transferencia bancaria", value: "transferencia" }, { label: "Tarjeta terminada en 1842", value: "tarjeta-1842" }]} defaultValue="transferencia" />
 * @example <PaymentMethod name="medio-pago" options={[{ label: "Transferencia bancaria", value: "transferencia" }, { label: "Tarjeta terminada en 1842", value: "tarjeta-1842", disabled: true, status: "Vencida", statusTone: "warn" }]} defaultValue="transferencia" description="La tarjeta terminada en 1842 venció en agosto. Actualízala en tu cuenta para volver a usarla." />
 */
export function PaymentMethod({
  legend = "Medio de pago",
  name = "payment-0",
  options = PAYMENT_METHOD_OPTIONS,
  defaultValue = "Transferencia bancaria",
  value,
  onChange,
  description = "No se realizará el cobro hasta confirmar.",
  className,
}: PaymentMethodProps) {
  const controlado = value !== undefined && onChange !== undefined;
  const marcado = value ?? defaultValue;
  return (
    <fieldset className={["ui-form", className].filter(Boolean).join(" ")} data-payment-method>
      <legend>{legend}</legend>
      {options.map((opcion, i) => {
        const clave = opcion.value ?? opcion.label;
        return (
          <label key={`${clave}-${i}`}>
            <input
              type="radio"
              name={name}
              value={opcion.value}
              disabled={opcion.disabled}
              onChange={onChange}
              {...(controlado ? { checked: clave === value } : { defaultChecked: clave === marcado })}
            />
            {` ${opcion.label}`}
            {opcion.status ? <span className={PAYMENT_METHOD_BADGE[opcion.statusTone ?? "neutral"]}>{opcion.status}</span> : null}
          </label>
        );
      })}
      {description ? <small>{description}</small> : null}
    </fieldset>
  );
}