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

const { locale } = useI18n(); // 使用 I18n
// 切換語言
const toggleLanguage = (lang) => {
  locale.value = lang;
  localStorage.setItem("EmpowerLanguage", 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 text-white"
    >
      <font-awesome-icon
        :icon="['fas', 'globe']"
        class="text-lg lg:text-2xl mb-1"
      />
      <span class="text-xs lg:text-sm block">{{ $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>
