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

export interface FormatByteProps {
  /**
 * The unit granularity to display
 */
  unit?: 'bit' | 'byte';
  /**
 * The unit display
 */
  unitDisplay?: 'long' | 'short' | 'narrow';
  /**
 * The unit system to use for formatting
 */
  unitSystem?: 'decimal' | 'binary';
  /**
 * The byte size to format
 */
  value: number;
}

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

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

  {@text}
}