<script setup lang="ts">
import { en, fr } from "@nuxt/ui/locale";

const { locale, setLocale, t } = useI18n();

function handleLocaleChange(value: string) {
  setLocale(value as "en" | "fr");
}
</script>

<template>
  <UHeader>
    <template #left>
      <NuxtLink to="/" :aria-label="t('nav.home')">
        <AppLogo class="w-auto h-6 shrink-0" />
      </NuxtLink>

      <UButton to="/projects" :label="t('nav.projects')" color="neutral" variant="ghost" />
    </template>

    <template #right>
      <ULocaleSelect
        :model-value="locale"
        :locales="[en, fr]"
        size="sm"
        color="neutral"
        variant="ghost"
        @update:model-value="handleLocaleChange"
      />
      <UColorModeButton />
    </template>
  </UHeader>
</template>
