import { memo } from "react";

export interface FormattedNumberProps {
	/** Value to format. */
	value: number;
	/** Whether to shorten the number if it gets too big. For example, "9k" instead of "9.231". */
	compact?: boolean;
}

export default memo(FormattedNumber);

const formatter = new Intl.NumberFormat("de");

function FormattedNumber({ value, compact }: FormattedNumberProps) {
	return compact ? formatCompact(value) : formatter.format(value);
}

/**
 * We could use `Intl.NumberFormat("de", { notation: "compact" })`,
 * but it uses "15 Mio." for the short form and doesn't shorten 1000 to 1k.
 *
 * Thats why we do it manually. Mimics "toSiUnit" from old frontend.
 */
function formatCompact(n: number): string {
	if (Math.abs(n) >= 1_000_000) {
		return `${(n / 1_000_000) | 0}m`;
	}
	if (Math.abs(n) >= 1_000) {
		return `${(n / 1_000) | 0}k`;
	}
	return formatter.format(n);
}