import * as React from "react";

export interface FigProps {
  value: React.ReactNode;
  unit?: React.ReactNode;
  /** Font-size override in px, e.g. 40 for a hero readout, smaller for compact contexts. */
  size?: number | string;
  className?: string;
}

export function Fig({ value, unit, size, className }: FigProps) {
  const classes = ["ads-fig"];
  if (className) classes.push(className);
  const style: React.CSSProperties | undefined =
    size !== undefined ? { fontSize: typeof size === "number" ? `${size}px` : size } : undefined;
  return (
    <span className={classes.join(" ")} style={style}>
      {value}
      {unit !== undefined && <span className="ads-fig__unit">{unit}</span>}
    </span>
  );
}
