<script lang="ts">

    {{#if auth}}
	import UserMenu from './UserMenu.svelte';
    {{/if}}
    const links = [
        { to: "/", label: "Home" },
        {{#if auth}}
        { to: "/dashboard", label: "Dashboard" },
        {{/if}}
        {{#if (includes examples "todo")}}
        { to: "/todos", label: "Todos" },
        {{/if}}
        {{#if (includes examples "ai")}}
        { to: "/ai", label: "AI Chat" },
        {{/if}}
    ];

</script>

<div>
	<div class="flex flex-row items-center justify-between px-4 py-2 md:px-6">
		<nav class="flex gap-4 text-lg">
			{#each links as link (link.to)}
				<a
					href={link.to}
					class=""
				>
					{link.label}
				</a>
			{/each}
		</nav>
		<div class="flex items-center gap-2">
		    {{#if auth}}
            <UserMenu />
             {{/if}}
		</div>
	</div>
	<hr class="border-neutral-800" />
</div>
