Métrica contextual.

<p class="ui-sample" data-metric-inline>Desocupación regional: <strong>8,1%</strong> <span>período may-jul 2026</span></p>

<p class="ui-sample border border-slate-300 bg-white p-4 text-slate-950" data-metric-inline>Desocupación regional: <strong>8,1%</strong> <span>período may-jul 2026</span></p>

export interface MetricInlineProps {
  /** Nombre del indicador; se muestra seguido de dos puntos. */
  label?: string;
  /** Cifra ya formateada, con unidad (`8,1%`, `9.384.210`). */
  value?: string;
  /** Texto secundario tras la cifra: período, fuente o variación (`▲ 0,3 pp`). */
  detail?: string;
  className?: string;
}

/**
 * Métrica en una línea propia: nombre del indicador, cifra en negrita y un dato de contexto; se usa para mostrar una sola cifra entre párrafos de un informe o bajo un gráfico.
 *
 * Emite su propio párrafo (`<p>`): no la pongas dentro de otro párrafo. Para varias cifras lado a lado, usa `MetricStrip`.
 *
 * @example <MetricInline label="Desocupación regional" value="8,1%" detail="período may-jul 2026" />
 * @example <MetricInline label="Desocupación regional" value="8,4%" detail="▲ 0,3 pp" />
 */
export function MetricInline({
  label = "Desocupación regional",
  value = "8,1%",
  detail = "período may-jul 2026",
  className,
}: MetricInlineProps) {
  if (!label && !value && !detail) return null;
  return (
    <p className={className} data-metric-inline>
      {label ? `${label}: ` : null}
      {value ? <strong>{value}</strong> : null}
      {detail ? <>{value ? " " : null}<span>{detail}</span></> : null}
    </p>
  );
}