<template>
  <div class="flex items-center gap-3 font-mono text-sm">
    <NuxtLink
      :to="{ query: { ...route.query, lang: 'en' } }"
      :class="lang === 'en' ? 'text-white' : 'text-white/30 hover:text-white/60'"
      class="transition-colors duration-200"
    >
      EN
    </NuxtLink>
    <span class="text-white/20">|</span>
    <NuxtLink
      :to="{ query: { ...route.query, lang: 'de' } }"
      :class="lang === 'de' ? 'text-white' : 'text-white/30 hover:text-white/60'"
      class="transition-colors duration-200"
    >
      DE
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const lang = computed(() => {
  const l = route.query.lang as string
  return l === 'de' ? 'de' : 'en'
})
</script>
