<script lang="ts">
	import Logo from './Logo.svelte';
	import { currentUser } from '$lib/stores/user';
	import { t } from '$lib/i18n';
</script>

<header class="bg-base-100 border-base-300 sticky top-0 z-20 border-b">
	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
		<a class="flex items-center gap-2" href="/">
			<Logo size="default" class="h-7 w-auto" />
		</a>

		<div class="flex items-center gap-4">
			{#if $currentUser}
				<div class="flex items-center gap-2">
					<span class="text-sm">{$currentUser.name}</span>
					<div class="dropdown dropdown-end">
						<button tabindex="0" class="btn btn-ghost btn-circle avatar">
							<div class="w-10 rounded-full">
								{#if $currentUser.picture}
									<img src={$currentUser.picture} alt={$currentUser.name} />
								{:else}
									<div class="bg-primary text-primary-content flex items-center justify-center w-full h-full">
										{$currentUser.name[0].toUpperCase()}
									</div>
								{/if}
							</div>
						</button>
						<ul class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
							<li><a href="/profile">{$t('profile')}</a></li>
							<li><a href="/alliance">{$t('alliance')}</a></li>
							<li><a href="/leaderboard">{$t('leaderboard')}</a></li>
							<li><a href="/store">{$t('store')}</a></li>
							<li><hr /></li>
							<li><button on:click={() => currentUser.logout()}>{$t('logout')}</button></li>
						</ul>
					</div>
				</div>
			{:else}
				<a href="/join" class="btn btn-primary btn-sm">{$t('login')}</a>
			{/if}
		</div>
	</div>
</header>
