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

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

<template>
  <div class="dropdown dropdown-bottom dropdown-end">
    <button
      tabindex="0"
      type="button"
      class="flex flex-col justify-center items-center bg-transparent w-[95px]"
    >
      <font-awesome-icon
        :icon="['fas', 'globe']"
        size="2x"
        class="text-white w-10 m-auto"
      />
      <span class="text-white block mt-0">{{ $t("language") }}</span>
    </button>
    <ul
      tabindex="0"
      class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-28 bg-[#4c625e] border text-center"
    >
      <li class="text-white" @click="toggleLanguage('tw')">
        <span> 繁體中文</span>
      </li>
      <li class="text-white" @click="toggleLanguage('cn')">
        <span> 简体中文</span>
      </li>
      <li class="text-white" @click="toggleLanguage('us')">
        <span> English</span>
      </li>
    </ul>
  </div>
</template>

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