<script lang="ts">
	import UserRound from '$icon/user-round';

	interface Props {
		src?: string;
		handle?: string;
		size?: string;
		class?: string;
	}

	let { src, handle, size = 'size-10', class: className = '' }: Props = $props();
</script>

{#if src}
	<img
		{src}
		alt={handle ? `${handle}'s avatar` : 'avatar'}
		class={`${size} shrink-0 rounded-full border border-border object-cover ${className}`}
	/>
{:else}
	<span
		class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-muted text-fg-subtle ${className}`}
		aria-hidden="true"
	>
		<UserRound class="size-1/2" />
	</span>
{/if}
