1<script lang="ts">
 2	let {
 3		src = '',
 4		username = '',
 5		size = 32,
 6		class: className = ''
 7	}: {
 8		src?: string;
 9		username?: string;
10		size?: number;
11		class?: string;
12	} = $props();
13
14	let initial = $derived(username.charAt(0).toUpperCase() || '?');
15</script>
16
17{#if src}
18	<img {src} alt={username} class={className} style="width: {size}px; height: {size}px; object-fit: cover; flex-shrink: 0;" />
19{:else}
20	<svg
21		width={size}
22		height={size}
23		viewBox="0 0 32 32"
24		class={className}
25		style="flex-shrink: 0;"
26		aria-label={username}
27		role="img"
28	>
29		<rect width="32" height="32" fill="#c62828" />
30		<text
31			x="16"
32			y="22"
33			text-anchor="middle"
34			fill="#fff"
35			font-family="Inter, sans-serif"
36			font-weight="700"
37			font-size="16"
38		>{initial}</text>
39	</svg>
40{/if}