infoalloggi-monorepo/apps/infoalloggi/src/components/user_avatar.tsx

import { colorIsDarkSimple } from "~/components/etichette";
import { Avatar, AvatarFallback } from "~/components/ui/avatar";
import { cn, getHexColorFromString, getInitials } from "~/lib/utils";
import type { UsersId } from "~/schemas/public/Users";

const colorOptions = new Map<string, string>();

export const getUserColor = (str: string) => {
	if (colorOptions.has(str)) {
		// biome-ignore lint/style/noNonNullAssertion: <exists>
		return colorOptions.get(str)!;
	}
	const usercolor = getHexColorFromString(str);
	colorOptions.set(str, usercolor);
	return usercolor;
};

export const UserAvatar = ({
	userId,
	username,
	className,
}: {
	userId: UsersId;
	username?: string;
	className?: string;
}) => {
	const userColor = getUserColor(userId);

	return (
		<Avatar className={cn("size-20", className)}>
			<AvatarFallback
				style={{
					backgroundColor: userColor,
					color: colorIsDarkSimple(userColor) ? "#FFFFFF" : "#000000",
				}}
			>
				{username && getInitials(username)}
			</AvatarFallback>
		</Avatar>
	);
};