<template>
  <el-dropdown class="lang-dropdown" trigger="click" @command="handleLanguage">
    <span class="lang-trigger">
      <Icon icon="mdi:translate" width="18" height="18" />
      {{ currentLangLabel }}
      <el-icon><ArrowDown /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn" :class="{ active: appStore.language === 'zh-cn' }">简体中文</el-dropdown-item>
        <el-dropdown-item command="en" :class="{ active: appStore.language === 'en' }">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { Icon } from '@iconify/vue'
import { useAppStore } from '@/store/app'

const appStore = useAppStore()

const currentLangLabel = computed(() => {
  return appStore.language === 'zh-cn' ? '简体中文' : 'English'
})

function handleLanguage(lang: string) {
  appStore.changeLanguage(lang)
}
</script>

<style lang="scss" scoped>
.lang-dropdown {
  .lang-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-base);
    color: var(--lang-color, #5a5e66);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      color: var(--lang-hover-color, #409eff);
    }
  }
}
</style>
