import { cn } from "@/lib/utils";

interface InlineStatProps {
  label: string;
  value: string | number;
  className?: string;
}

/**
 * Displays a label-value pair inline, commonly used in stats rows.
 * Uses text-xs size with muted label and bold value.
 */
export function InlineStat({ label, value, className }: InlineStatProps) {
  return (
    <div className={cn("flex gap-1 items-center text-xs", className)}>
      <span className="text-muted-foreground text-start">{label}</span>
      <span className="font-semibold text-foreground leading-[18px] text-start">
        {typeof value === "number" ? value.toLocaleString() : value}
      </span>
    </div>
  );
}