Paquete de créditos.

<section class="ui-sample ui-service" data-credit-pack="true"><header><strong>Créditos usaia</strong><span class="badge badge--ok">62% disponible</span></header><p><b>6.200</b> de 10.000 créditos</p><progress value="62" max="100"></progress><a class="btn btn--secondary" href="#comprar">Comprar paquete</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-credit-pack="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Créditos usaia</strong><span class="badge badge--ok">62% disponible</span></header><p><b>6.200</b> de 10.000 créditos</p><progress value="62" max="100"></progress><a class="btn btn--secondary underline underline-offset-4" href="#comprar">Comprar paquete</a></section>

export interface CreditPackProps {
  /** Nombre del paquete o del servicio que consume los créditos. */
  title?: string;
  /** Saldo en porcentaje o estado del paquete, junto al título; se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce de `value` y `max` (25% o más disponible: `ok`; menos de 25%: `warn`; sin saldo: `err`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Créditos disponibles, ya formateados («6.200»), en negrita. */
  balance?: string;
  /** Total del paquete y unidad, después del saldo; vacío lo oculta. */
  detail?: string;
  /** Valor de la barra de progreso (`<progress value>`). */
  value?: number;
  /** Máximo de la barra de progreso; con el default, `value` es el porcentaje disponible. */
  max?: number;
  /** URL de la página para comprar créditos. */
  href?: string;
  /** Texto del enlace para comprar más créditos; vacío lo oculta. */
  linkLabel?: string;
  className?: string;
}

function claseEstado(value: number, max: number, tone?: "ok" | "warn" | "err" | "neutral") {
  const proporcion = max > 0 ? value / max : 0;
  const tono = tone ?? (proporcion >= 0.25 ? "ok" : proporcion > 0 ? "warn" : "err");
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Saldo de un paquete de créditos prepagados, con cifra disponible, total, barra de progreso y enlace para comprar más; se usa en la cuenta de servicios que cobran por uso.
 *
 * `status`, `balance` y `value` se pasan por separado: mantenlos coherentes entre sí. El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color; comprar es una acción secundaria (`btn--secondary`).
 *
 * @example <CreditPack title="Créditos usaia" status="18% disponible" balance="1.800" detail="de 10.000 créditos" value={18} href="/cuenta/creditos" />
 */
export function CreditPack({
  title = "Créditos usaia",
  status = "62% disponible",
  statusTone,
  balance = "6.200",
  detail = "de 10.000 créditos",
  value = 62,
  max = 100,
  href = "#comprar",
  linkLabel = "Comprar paquete",
  className,
}: CreditPackProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-credit-pack>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(value, max, statusTone)}>{status}</span> : null}
      </header>
      {balance || detail ? (
        <p>
          {balance ? <b>{balance}</b> : null}
          {detail ? (balance ? ` ${detail}` : detail) : null}
        </p>
      ) : null}
      <progress value={value} max={max}></progress>
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}