import * as stylex from "@stylexjs/stylex";
import { createElement, memo } from "react";
import { color, font, fontSize, size } from "./tokens.stylex";

export interface SubscriptionTokenProps {
	value: string;
	size: "none" | "small" | "huge";
}

export default memo(SubscriptionToken);

const styles = stylex.create({
	code: {
		fontSize: font.monospace,
		backgroundColor: color.gray600,
		padding: `${size.rem0_5} ${size.rem2}`,
		fontWeight: "bold",
	},
});

const sizeVariant = stylex.create({
	none: {},
	small: {
		fontSize: fontSize.h3,
		padding: `${size.rem0_5} ${size.rem2}`,
	},
	huge: {
		fontSize: fontSize.h1,
		padding: `${size.rem0_5} ${size.rem4}`,
	},
});

function SubscriptionToken({ size, value }: SubscriptionTokenProps) {
	return createElement(
		"code",
		stylex.props(styles.code, sizeVariant[size]),
		value,
	);
}