<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();

	let failed = $state(false);

	$effect(() => {
		src;
		failed = false;
	});
</script>

{#if src && !failed}
	<img
		{src}
		alt={handle ? `${handle}'s avatar` : "avatar"}
		class={`${size} shrink-0 rounded-full border border-border-default object-cover ${className}`}
		onerror={() => (failed = true)}
	/>
{:else}
	<span
		class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-subtle ${className}`}
		role={handle ? "img" : undefined}
		aria-label={handle ? `${handle}'s avatar` : undefined}
		aria-hidden={handle ? undefined : "true"}
	>
		<UserRound class="size-1/2" />
	</span>
{/if}
