<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
	import { LanguageToggle } from '$lib/components/ui/language-toggle';
	import { LayoutDashboard } from 'lucide-svelte';
	import { languageStore } from '$lib/stores/language.svelte';

	let {
		isAuthenticated = false,
		showDashboardLink = false
	}: {
		isAuthenticated?: boolean;
		showDashboardLink?: boolean;
	} = $props();

	const t = $derived(languageStore.t);
</script>

<nav class="flex items-center gap-1 sm:gap-2 mb-6 w-full">
	{#if isAuthenticated}
		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/dashboard')} class="px-2 sm:px-3">
			<LayoutDashboard class="w-4 h-4" />
			<span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
		</Button>
	{:else}
		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/signin')} class="px-2 sm:px-3">
			{t.auth.signIn}
		</Button>
	{/if}
	<div class="ml-auto flex items-center gap-1 sm:gap-2">
		<LanguageToggle />
		<ThemeToggle />
	</div>
</nav>
