<script lang="ts">
	interface Props {
		nama: string;
		avatarUrl?: string | null;
		size?: 'md' | 'lg' | 'xl';
		variant?: 'on-dark' | 'light';
		class?: string;
	}

	let {
		nama,
		avatarUrl = null,
		size = 'lg',
		variant = 'light',
		class: className = ''
	}: Props = $props();

	const sizeClass = {
		md: 'h-16 w-16 text-xl',
		lg: 'h-20 w-20 text-3xl',
		xl: 'h-24 w-24 text-4xl'
	};

	const initial = $derived(nama.charAt(0).toUpperCase() || '?');
</script>

<div
	class="icon-ring icon-ring-circle shrink-0 overflow-hidden font-bold {sizeClass[size]} {variant ===
	'on-dark'
		? 'icon-ring-on-dark bg-white/10'
		: 'icon-ring-violet bg-base-200/40'} {className}"
>
	{#if avatarUrl}
		<img src={avatarUrl} alt="Avatar {nama}" class="h-full w-full object-cover" />
	{:else}
		{initial}
	{/if}
</div>
