<script setup>
import { onMounted } from 'vue'

const toggleLanguage = () => {
  if (typeof OpenCC === 'undefined') {
    console.error('OpenCC not loaded')
    return
  }

  const currentMode = localStorage.getItem('lang-mode') || 's2t'
  const config = currentMode === 's2t' 
    ? { from: 'cn', to: 'tw' }
    : { from: 'tw', to: 'cn' }

  const converter = OpenCC.Converter(config)
  const root = document.querySelector('#VPContent') || document.body
  
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false)
  let node
  while (node = walker.nextNode()) {
    node.textContent = converter(node.textContent)
  }

  localStorage.setItem('lang-mode', currentMode === 's2t' ? 't2s' : 's2t')
}

onMounted(() => {
  // 可以根据本地存储初始化
})
</script>

<template>
  <button class="lang-btn" @click="toggleLanguage">
    繁/简
  </button>
</template>

<style scoped>
.lang-btn {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s;
  margin-left: 12px;
}

.lang-btn:hover {
  border-color: var(--vp-c-brand-1);
  color: var(--vp-c-brand-1);
}

@media (max-width: 768px) {
  .lang-btn {
    margin: 8px 0;
    width: 100%;
    justify-content: center;
  }
}
</style>
