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

const { currentLang, setLang } = useI18n()
const store = useGameStore()

const langLabels: Record<string, string> = {
  zh: '中文',
  en: 'English',
  ja: '日本語',
  ko: '한국어',
  fr: 'Français',
  de: 'Deutsch',
  es: 'Español',
  pt: 'Português',
}
</script>

<template>
  <div class="lang-switch" v-if="store.storyLocales.languages.length > 1">
    <button
      v-for="lang in store.storyLocales.languages"
      :key="lang"
      :class="['lang-btn', { active: currentLang === lang }]"
      @click="setLang(lang)"
    >{{ langLabels[lang] || lang.toUpperCase() }}</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);
  border-radius: 0;
  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>
