<template>
    <el-select class="language-switch" :class="{ 'default-theme': defaultTheme }" v-model="currentLang"
        size="small">
        <el-option :class="{ 'default-theme': defaultTheme }" v-for="(item, index) in langData" :value="item.value"
            :label="item.label" :key="index" />
    </el-select>
</template>

<script setup>
import { useLanguage } from '@/composables/useLanguage'

const props = defineProps({
    defaultTheme: {
        type: Boolean,
        default: false,
    },
})

const { langOptions: langData, currentLang } = useLanguage()
</script>

<style lang="scss" scoped>
.language-switch {
    --el-text-color-regular: #000;
    --el-select-input-font-size: 16px;
    --el-select-input-color: #303133;

    flex-shrink: 0;
    width: 120px;
    height: 28px;
    line-height: 28px;

    :deep(.el-select__wrapper) {
        font-size: 16px;
        font-weight: 500;

        .el-select__selection {
            height: 28px;
            line-height: 28px;
        }

        .el-select__selected-item {
            height: 28px;
            line-height: 28px;
        }
    }
}
</style>
