import * as stylex from "@stylexjs/stylex";
import { memo } from "react";

import { controlColor } from "./theme.stylex";
import { fontSize, radius, size } from "./tokens.stylex";

import FormattedNumber from "./FormattedNumber";

export interface NumericBadgeProps {
	value: number;
}

const styles = stylex.create({
	badge: {
		display: "flex",
		alignItems: "center",
		justifyContent: "center",

		backgroundColor: controlColor.numericBadgeBackground,

		minWidth: "min-content",
		maxWidth: "min-content",
		minHeight: "min-content",
		maxHeight: "min-content",
		aspectRatio: "1 / 1",

		padding: size.px1_5,

		borderRadius: radius.circle,

		fontSize: fontSize.tiny,
		fontWeight: "bold",
	},
});

export default memo(function NumericBadge({ value }: NumericBadgeProps) {
	return (
		<span {...stylex.props(styles.badge)}>
			<FormattedNumber value={value} />
		</span>
	);
});