<script lang="ts">
	interface Props {
		name: string;
		src?: string | null;
		size?: "sm" | "md" | "lg" | "xl";
	}

	let { name, src = null, size = "md" }: Props = $props();

	const initial = $derived(name ? name[0].toUpperCase() : "?");

	const sizes = {
		sm: { box: "w-8 h-8", text: "text-body", radius: "rounded-[16px]" },
		md: { box: "w-12 h-12", text: "text-h3", radius: "rounded-[24px]" },
		lg: { box: "w-16 h-16", text: "text-h2", radius: "rounded-[32px]" },
		xl: { box: "w-24 h-24", text: "text-h1", radius: "rounded-[48px]" },
	};
</script>

{#if src}
	<img
		{src}
		alt={name}
		class="{sizes[size].box} {sizes[size].radius} object-cover shrink-0"
	/>
{:else}
	<div
		class="{sizes[size].box} {sizes[size]
			.radius} bg-primary flex items-center justify-center shrink-0"
	>
		<span class="font-heading {sizes[size].text} text-night leading-none">
			{initial}
		</span>
	</div>
{/if}
