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

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

export interface UserAvatarProps {
	/** Username must have at least two chars (which should be guaranteed by the backend). */
	userName: string;
}

export default memo(UserAvatar);

const styles = stylex.create({
	avatar: {
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		borderRadius: radius.circle,
		backgroundColor: color.gray800,

		width: size.px12,
		height: size.px12,
		minWidth: size.px12,
		minHeight: size.px12,

		fontWeight: "bold",
	},
});

function UserAvatar({ userName }: UserAvatarProps) {
	return (
		<span {...stylex.props(styles.avatar)}>
			{userName[0]}
			{userName[1]}
		</span>
	);
}