<script lang="ts">
	import { cn } from '$lib/Utils';

	export let name: string;
	export let src: string;
	export let alt: string;
	export let level: number;
</script>

<div class="flex w-24 flex-col space-y-2 text-center">
	<img
		src={`data:image;base64,${src}`}
		{alt}
		class={cn(`rounded-full border-2 lg:border-4`, {
			'border-green-600': level === 1,
			'border-yellow-600': level === 2,
			'border-red-600': level === 3
		})}
		width={500}
		height={500}
	/>
	<span class="text-sm font-semibold break-all">{name}</span>
</div>
