<script setup>
import { useI18n } from "vue-i18n";
import { ref, onMounted } from "vue";

const { locale } = useI18n(); // 使用 I18n
const language = ref(locale.value)
// 切換語言
const toggleLanguage = (lang) => {
  locale.value = lang;
  localStorage.setItem("CviLanguage", lang);
  language.value = lang;
};
</script>

<template>
  <div class="dropdown dropdown-bottom dropdown-end">
    <button
      tabindex="0"
      type="button"
      class="flex flex-col justify-center items-center btn-group"
    >
      <span
        :class="`fi fi-${language} fis text-3xl rounded-full border-1 border-white`"
      ></span>
      <span class="text-white">{{ $t("language") }}</span>
    </button>
    <ul
      tabindex="0"
      class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-36 bg-[#4c625e] border text-center"
    >
      <li class="text-white" @click="toggleLanguage('tw')">
        <span><span class="fi fi-tw"></span>繁體中文</span>
      </li>
      <li class="text-white" @click="toggleLanguage('cn')">
        <span><span class="fi fi-cn"></span>简体中文</span>
      </li>
      <li class="text-white" @click="toggleLanguage('us')">
        <span><span class="fi fi-us"></span>English</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>
