<script lang="ts">
	import { displayName } from '$lib/stores/auth';
	import { currentCollective } from '$lib/stores/collective';
	import Avatar from '$lib/components/Avatar.svelte';
	import { Menu } from 'lucide-svelte';
	import * as m from '$lib/paraglide/messages';

	let { onMenu }: { onMenu: () => void } = $props();
</script>

<header class="md:hidden sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-black/5 bg-surface/80 px-4 backdrop-blur-xl dark:border-white/5">
	<button
		type="button"
		data-testid="mobile-hamburger"
		aria-label={m.app_name()}
		onclick={onMenu}
		class="-ml-1 rounded p-1.5 text-slate-700 hover:bg-black/5 dark:text-slate-300 dark:hover:bg-white/5"
	>
		<Menu size={20} strokeWidth={1.5} />
	</button>

	<div class="flex min-w-0 flex-1 items-center gap-2">
		<span class="text-base">{$currentCollective?.emoji ?? '🏠'}</span>
		<span class="truncate text-sm font-semibold text-text-primary">
			{$currentCollective?.name ?? m.app_name()}
		</span>
	</div>

	<a href="/settings" aria-label={m.nav_settings()} class="rounded-full">
		<Avatar name={$displayName} size={28} />
	</a>
</header>
