<script setup lang="ts">
import { useI18n } from '@/composables/useI18n'

const { currentLang, setLang, t } = useI18n()
</script>

<template>
  <div class="lang-switch">
    <button
      :class="['lang-btn', { active: currentLang === 'zh' }]"
      @click="setLang('zh')"
    >中文</button>
    <button
      :class="['lang-btn', { active: currentLang === 'en' }]"
      @click="setLang('en')"
    >English</button>
  </div>
</template>

<style scoped>
.lang-switch {
  display: flex;
  gap: 2px;
}

.lang-btn {
  padding: 4px 10px;
  font-size: 12px;
  color: #888;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.15s;
}

.lang-btn:first-child { border-radius: 3px 0 0 3px; }
.lang-btn:last-child { border-radius: 0 3px 3px 0; }

.lang-btn:hover { color: #ccc; background: rgba(255, 255, 255, 0.1); }
.lang-btn.active { color: #fff; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); }
</style>
