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

import { color, font, size } from "./tokens.stylex";

export interface InlineCodeProps {
	children: string | number;
	thin?: boolean;
}

const styles = stylex.create({
	code: {
		fontFamily: font.monospace,
		backgroundColor: color.gray500,
		padding: `${size.px0_5} ${size.px1_5}`,
		fontWeight: "bold",
	},
	thin: {
		fontWeight: "normal",
	},
});

export default memo(function InlineCode({ children, thin }: InlineCodeProps) {
	return (
		<code {...stylex.props(styles.code, thin && styles.thin)}>
			{children}
		</code>
	);
});