<script lang="ts">
import { page } from '$app/state';
import { m } from '$lib/paraglide/messages.js';

let { isAdmin = false }: { isAdmin?: boolean } = $props();
</script>

<div class="flex">
	<div class="mr-10 flex flex-shrink-0 items-center">
		<a href="/" class="flex items-center" aria-label="Familienarchiv">
			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
				>Familienarchiv</span
			>
		</a>
	</div>

	<nav class="hidden items-center sm:flex sm:space-x-1">
		<a
			href="/"
			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                   {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
                    ? 'rounded bg-nav-active text-ink'
                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
		>
			{m.nav_documents()}
		</a>

		<a
			href="/persons"
			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                   {page.url.pathname.startsWith('/persons')
                    ? 'rounded bg-nav-active text-ink'
                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
		>
			{m.nav_persons()}
		</a>

		<a
			href="/conversations"
			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                   {page.url.pathname.startsWith('/conversations')
                    ? 'rounded bg-nav-active text-ink'
                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
		>
			{m.nav_conversations()}
		</a>
		{#if isAdmin}
			<a
				href="/admin"
				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                   {page.url.pathname.startsWith('/admin')
                        ? 'rounded bg-nav-active text-ink'
                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
			>
				{m.nav_admin()}
			</a>
		{/if}
	</nav>
</div>
