<template>
  <UiDropdown placement="bottom-end" trigger="hover">
    <template #default="{ isActive }">
      <UiButton
        right-icon="chevron-down"
        type="ghost"
        size="large"
        color="secondary"
        style="text-transform: capitalize"
        :state="isActive ? 'hover' : undefined"
      >
        {{ currentLocale }}
      </UiButton>
    </template>

    <template #dropdown>
      <UiDropdownItem
        v-for="locale in locales"
        :key="locale.code"
        :active="currentLocale === locale.code"
        @click="setLocale(locale.code)"
      >
        {{ locale.name }}
      </UiDropdownItem>
    </template>
  </UiDropdown>
</template>

<script setup>
const { locale: currentLocale, locales, setLocale } = useI18n()
</script>
