Estado de suscripción.

<section class="ui-sample ui-service" data-subscription-status="true"><header><strong>Suscripción Equipo</strong><span class="badge badge--ok">Activa</span></header><dl><div><dt>Próximo cobro</dt><dd>$24.990 · 25 sep 2026</dd></div><div><dt>Usuarios</dt><dd>6 de 10</dd></div></dl><a class="btn btn--secondary" href="#facturas">Ver facturas</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-subscription-status="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Suscripción Equipo</strong><span class="badge badge--ok">Activa</span></header><dl class="grid gap-2"><div><dt>Próximo cobro</dt><dd>$24.990 · 25 sep 2026</dd></div><div><dt>Usuarios</dt><dd>6 de 10</dd></div></dl><a class="btn btn--secondary underline underline-offset-4" href="#facturas">Ver facturas</a></section>

export interface SubscriptionStatusItem {
  /** Nombre del dato (`<dt>`): próximo cobro, usuarios, plan. */
  label: string;
  value: string;
}

/** Tono de la insignia de estado: `ok` activa, `warn` se cancela o tiene un pago pendiente, `err` suspendida o vencida, `neutral` sin tono. */
export type SubscriptionStatusTone = "ok" | "warn" | "err" | "neutral";

export interface SubscriptionStatusProps {
  /** Nombre de la suscripción o del plan. */
  title?: string;
  /** Estado visible («Activa», «Se cancela el 25 sep», «Pago pendiente»); va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Activa» → `ok`, «Se cancela…» y «Pago pendiente» → `warn`, «Suspendida» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: SubscriptionStatusTone;
  /** Datos de la suscripción como pares etiqueta y valor. */
  items?: SubscriptionStatusItem[];
  /** Destino de las facturas o del detalle; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const SUBSCRIPTION_STATUS_ITEMS: SubscriptionStatusItem[] = [
  { label: "Próximo cobro", value: "$24.990 · 25 sep 2026" },
  { label: "Usuarios", value: "6 de 10" },
];

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

const SUBSCRIPTION_STATUS_TONES: [string, SubscriptionStatusTone][] = [
  ["activa", "ok"],
  ["se cancela", "warn"],
  ["pago pendiente", "warn"],
  ["suspendida", "err"],
  ["vencida", "err"],
];

function subscriptionStatusTone(status: string, tone?: SubscriptionStatusTone): SubscriptionStatusTone {
  // Compara el inicio del texto: «Inactiva» contiene «activa».
  const texto = status.toLowerCase();
  return tone ?? SUBSCRIPTION_STATUS_TONES.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
}

/**
 * Estado de una suscripción con el próximo cobro, el uso del plan y un enlace a las facturas; se usa en la página de cuenta o de facturación.
 *
 * El estado va en texto dentro de una insignia con tono. Si la suscripción está cancelada, el estado dice cuándo termina y el próximo cobro indica que no habrá otro.
 *
 * @example <SubscriptionStatus title="Suscripción Equipo" status="Activa" href="/cuenta/facturas" />
 * @example <SubscriptionStatus status="Se cancela el 25 sep" items={[{ label: "Próximo cobro", value: "No habrá otro cobro" }, { label: "Usuarios", value: "6 de 10" }]} />
 */
export function SubscriptionStatus({
  title = "Suscripción Equipo",
  status = "Activa",
  statusTone,
  items = SUBSCRIPTION_STATUS_ITEMS,
  href = "#facturas",
  linkLabel = "Ver facturas",
  className,
}: SubscriptionStatusProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-subscription-status>
      <header>
        <strong>{title}</strong>
        {status ? <span className={SUBSCRIPTION_STATUS_BADGE[subscriptionStatusTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {href && linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}