import { cn } from "@/lib/utils";
import type { HTMLAttributes, ReactNode } from "react";

type KpiFigureProps = HTMLAttributes<HTMLSpanElement> & {
  children: ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
};

const sizes = {
  sm: "data-sm",
  md: "data-md",
  lg: "data-lg",
  xl: "data-xl",
} as const;

export function KpiFigure({ children, size, className, ...props }: KpiFigureProps) {
  return (
    <span className={cn("kpi-figure", size && sizes[size], className)} {...props}>
      {children}
    </span>
  );
}