<script setup>
import { changeLanguage, messages, getLocale } from "@/lang"

const currentLocale = ref(getLocale())

const langMapping = ref({
  zh: '中文简体',
  vi: 'Vietnamese',
  en: 'English',
})
const list = Object.keys(messages).map(item => ({
  label: langMapping.value[item],
  value: item
}))

const handleLanguageChange = (value) => {
  currentLocale.value = value
  changeLanguage(value)
}
</script>

<template>
  <el-dropdown @command="handleLanguageChange" trigger="click">
    <div class="lang-selector">
      <img src="@/assets/image/layout/globe-outline.png" alt="" style="width: 24px;">
      <span class="lang-text">{{ langMapping[currentLocale] }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in list"
          :key="item.value"
          :command="item.value"
          :class="{ 'is-active': currentLocale === item.value }"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
.lang-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
  transition: background 0.3s;
}

.lang-selector:hover {
  background: rgba(248, 185, 50, 0.1);
}

.lang-icon {
  font-size: 20px;
}

.lang-text {
  color: #9ca3af;
  font-size: 14px;
}
</style>
