<template>
  <div class="language-switcher">
    <el-select-v2
      v-model="currentLanguage"
      :options="languageOptions"
      style="vertical-align: middle"
      class="select"
      @change="setLanguage(currentLanguage)"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { setLocale } from "@/i18n";

const { locale } = useI18n();
const currentLanguage = ref(locale.value);
const languageOptions = [
  { label: "中文", value: "ZH" },
  { label: "English", value: "EN" },
];

function setLanguage(lang) {
  setLocale(lang);
  currentLanguage.value = lang;
}
</script>

<style scoped>
.language-switcher {
  width: 150px;
  height: 30px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
button {
  width: 80px;
  height: 30px;
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

button.active {
  background: #4fcacd;
  color: white;
}
</style>
