<template>
  <div class="language-switcher">
    <button 
      @click="setLanguage('ZH')" 
      :class="{ active: currentLanguage === 'ZH' }"
    >
      中文
    </button>
    <button 
      @click="setLanguage('EN')" 
      :class="{ active: currentLanguage === 'EN' }"
    >
      English
    </button>
  </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)

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

<style scoped>
.language-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

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