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

<script lang="ts">
	let { pubkey }: { pubkey: string } = $props();

	let userProfile = $derived(window.eve.getProfile(pubkey));
	let anonName = $derived('anon' + pubkey.substr(0, 8) + ':' + pubkey.substr(-8));
</script>

{#snippet skeleton()}
	<span class="inline-block skeleton h-[1em] w-32" style="transform: translateY(10%)"></span>
{/snippet}

{#if !pubkey}
	{@render skeleton()}
{:else}
	{#await userProfile}
		{@render skeleton()}
	{:then userProfile}
		{#if userProfile?.name}
			{userProfile.name}
		{:else}
			{anonName}
		{/if}
	{:catch}
		{anonName}
	{/await}
{/if}
