<template>
  <div class="relative">
    <button 
      @click="isOpen = !isOpen"
      class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none"
    >
      <span>{{ currentLocale?.name }}</span>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </button>
    
    <div 
      v-if="isOpen"
      class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"
    >
      <button
        v-for="locale in availableLocales"
        :key="locale.code"
        @click="switchLanguage(locale.code)"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
      >
        {{ locale.name }}
      </button>
    </div>
  </div>
</template>

<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const isOpen = ref(false)
const availableLocales = locales.value
const currentLocale = computed(() => 
  availableLocales.find(l => l.code === locale.value)
)

const switchLanguage = async (newLocale) => {
  await navigateTo(switchLocalePath(newLocale))
  isOpen.value = false
}
</script>


