"use client"
import React, { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
import { useNumberFormatter } from "../../hooks"
import { BigNumberLike, NumberFormatOptions } from "../../utils"
import { classNames } from "../../utils/classNames"

export type NumberProps = {
  className?: string
  value?: BigNumberLike | null | undefined
  children?: React.ReactNode
} & NumberFormatOptions &
  ComponentPropsWithoutRef<"span">

export const NumberDisplay = forwardRef<ElementRef<"span">, NumberProps>(
  function NumberDisplay(
    {
      value,
      children,
      className,
      bounded,
      display,
      suffix,
      prefix,
      custom,
      ...rest
    },
    ref,
  ) {
    const format = useNumberFormatter()
    return (
      <span className={classNames("font-mono", className)} {...rest} ref={ref}>
        {children ??
          format(value, { bounded, display, suffix, prefix, custom })}
      </span>
    )
  },
)