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

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

export function StatMetric({ label, value, className }: StatMetricProps) {
  return (
    <div
      className={cn(
        "bg-background-neutral-50 dark:bg-muted rounded-[16px] p-3 md:p-4 flex flex-col gap-1.5 md:gap-2 items-center justify-center flex-1 min-w-0",
        className
      )}
    >
      <p className="text-xs md:text-sm text-muted-foreground text-center truncate w-full">{label}</p>
      <p className="text-sm md:text-base font-bold text-foreground text-center truncate w-full">
        {typeof value === "number" ? value.toLocaleString() : value}
      </p>
    </div>
  );
}