<template>
  <header class="sticky top-0 z-50 bg-neutral-200 shadow">
    <AppStripe>
      <nav class="mx-auto py-4 flex items-center justify-between">
        <!-- your logo / home link -->
        <NuxtLink to="/" class="text-xl font-semibold">
          {{ t('header.home') }}
        </NuxtLink>

        <!-- nav links -->
        <ul class="flex space-x-6">
          <li>
            <NuxtLink to="/apartments">{{ t('header.apartments') }}</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/book">{{ t('header.book') }}</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/contact">{{ t('header.contact') }}</NuxtLink>
          </li>
          <AppLocaleSwitcher/>
        </ul>
      </nav>
    </AppStripe>
  </header>
</template>

<script setup lang="ts">
const {t, tm, rt} = useI18n()
</script>
