<script lang="ts">
	let showTooltip = $state(false);

	interface Props {
		username?: string;
		url?: string;
		onclick?: () => void;
	}

	let { username = 'lolo', url = '/img/default-avatar.png', onclick = () => {} }: Props = $props();
</script>

<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<div style="position: relative; display: inline-block;">
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<img
		src={url ?? '/img/default-avatar.png'}
		onmouseenter={() => (showTooltip = true)}
		onmouseleave={() => (showTooltip = false)}
		{onclick}
		alt="User Avatar"
	/>
	{#if showTooltip}
		<div class="tooltip">{username}</div>
	{/if}
</div>

<style>
	img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}
	.tooltip {
		position: absolute;
		top: 110%;
		left: 50%;
		transform: translateX(-50%);
		background: #333;
		color: #fff;
		padding: 4px 8px;
		border-radius: 4px;
		white-space: nowrap;
		font-size: 0.9em;
		z-index: 1;
		pointer-events: none;
	}
</style>
