import { formatNumber } from '@zag-js/i18n-utils';
import { trackSplit, track } from 'ripple';
import { useLocaleContext } from '../../providers/locale';

export interface FormatNumberProps extends Intl.NumberFormatOptions {
  value: number;
}

export component FormatNumber(props: FormatNumberProps) {
  const [value, intlOptions] = trackSplit(props, ['value']);
  const locale = useLocaleContext();

  const text = track(() => formatNumber(@value, @locale.locale, @intlOptions));

  {@text}
}