Frescura.

<p class="ui-sample" data-freshness="true"><strong class="badge badge--ok">Actualizado</strong> <time dateTime="2026-08-25T18:24:40-04:00">18:24:40 CLT</time> · <span>Fuente: DTPM · posiciones GPS de buses</span></p>

<p class="ui-sample border border-slate-300 bg-white p-4 text-slate-950" data-freshness="true"><strong class="badge badge--ok">Actualizado</strong> <time dateTime="2026-08-25T18:24:40-04:00">18:24:40 CLT</time> · <span>Fuente: DTPM · posiciones GPS de buses</span></p>

/** Tono del estado: `ok` al día, `warn` atrasado, `err` sin datos o con la carga fallida, `neutral` sin tono. */
export type FreshnessTone = "ok" | "warn" | "err" | "neutral";

export interface FreshnessProps {
  /** Marca los datos como atrasados: cambia el texto por defecto a «Datos atrasados», el tono a `warn` y emite `data-stale`. */
  stale?: boolean;
  /** Texto del estado; por defecto «Actualizado» o «Datos atrasados» según `stale`; vacío lo oculta. */
  label?: string;
  /** Tono de la insignia del estado; por defecto `ok`, o `warn` con `stale`. */
  tone?: FreshnessTone;
  /** Momento de la última actualización en ISO 8601 con zona horaria (atributo `dateTime`). */
  dateTime?: string;
  /** Texto visible de ese momento: hora local o tiempo relativo («hace 47 min»); vacío oculta el `<time>`. */
  time?: string;
  /** Origen de los datos, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

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

/**
 * Línea de frescura que dice cuándo se actualizó un dato en vivo y de dónde viene, para tableros y páginas con datos que cambian.
 *
 * El estado va en texto dentro de una insignia con tono. Con `stale` avisa que los datos están atrasados; `dateTime` conserva el momento exacto aunque el texto visible sea relativo.
 *
 * @example <Freshness dateTime="2026-08-25T18:24:40-04:00" time="18:24:40 CLT" source="Fuente: DTPM · posiciones GPS de buses" />
 * @example <Freshness stale dateTime="2026-08-25T18:24:40-04:00" time="hace 47 min" />
 */
export function Freshness({
  stale = false,
  label,
  tone,
  dateTime = "2026-08-25T18:24:40-04:00",
  time = "18:24:40 CLT",
  source = "Fuente: DTPM · posiciones GPS de buses",
  className,
}: FreshnessProps) {
  const estado = label ?? (stale ? "Datos atrasados" : "Actualizado");
  const tono = tone ?? (stale ? "warn" : "ok");
  return (
    <p className={className} data-freshness data-stale={stale || undefined}>
      {estado ? <strong className={FRESHNESS_CLASES[tono]}>{estado}</strong> : null}
      {estado && time ? " " : null}
      {time ? <time dateTime={dateTime || undefined}>{time}</time> : null}
      {source ? <>{estado || time ? " · " : null}<span>{source}</span></> : null}
    </p>
  );
}