<template>
    <USelectMenu
      v-model="selectedLocale"
      :items="locales"
      label-key="name"
      :search-input="{ icon: 'i-lucide-search' }"
      placeholder="Select country"
      class="w-48 bg-block-light dark:bg-block-dark border-border-light dark:border-border-dark"
      @update:model-value="setLocaleManually($event)"
    >
      <template #leading="{ modelValue, ui }">
        <span v-if="modelValue" class="size-5 text-center">
          <UIcon
            :name="(modelValue?.icon as string) || 'i-lucide-earth'"
            :class="[ui.leadingIcon(), 'border border-border-light dark:border-border-dark rounded-full']"
          />
        </span>
      </template>
      <template #item-leading="{ item }">
        <span class="size-5 text-center">
          <!-- {{ item.name }} -->
          <UIcon :name="item.icon as string" class="size-5 text-accent" />
        </span>
      </template>
    </USelectMenu>
  </template>
  
  <script setup lang="ts">
  import type { LocaleObject } from "@nuxtjs/i18n";
  const { setLocale, locales, locale } = useI18n();
  
  const selectedLocale = ref(
    locales.value.find((item) => item.code === locale.value)
  );
  
  function setLocaleManually(newLocale: LocaleObject) {
    locale.value = newLocale.code;
    locales.value.find((item) => item.code === locale.value);
    setLocale(newLocale.code);
  }
  </script>