<svelte:options
	customElement={{
		tag: 'eve-avatar',
		shadow: 'none'
	}}
/>

<script lang="ts">
	let {
		pubkey,
		refreshIndex = 0,
		size = 'small'
	}: {
		pubkey: string;
		refreshIndex?: number;
		size?: 'small' | 'medium' | 'large';
	} = $props();
</script>

<div class="avatar">
	<div
		class:w-10={size === 'small'}
		class:h-10={size === 'small'}
		class:w-16={size === 'medium'}
		class:h-16={size === 'medium'}
		class:w-20={size === 'large'}
		class:h-20={size === 'large'}
		class="mask mask-squircle"
	>
		<img src={window.eve.getAvatar(pubkey) + '#' + refreshIndex} />
	</div>
</div>
