import * as React from "react";
import { cn } from "@/lib/utils";

interface ValueDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number;
  label?: string;
  color?: string;
  decimals?: number;
}

export function ValueDisplay({
  value,
  label,
  color = "var(--text-primary)",
  decimals = 0,
  className,
  ...props
}: ValueDisplayProps) {
  const formattedValue =
    decimals > 0 ? value.toFixed(decimals) : Math.floor(value).toString();

  return (
    <div
      data-slot="value-display"
      className={cn("flex flex-col items-center", className)}
      {...props}
    >
      <span
        className="font-[var(--font-mono)] text-2xl tabular-nums"
        style={{ color }}
      >
        {formattedValue}
      </span>
      {label && (
        <span className="text-xs text-[var(--text-secondary)] mt-0.5">
          {label}
        </span>
      )}
    </div>
  );
}
