div(class="language-switcher relative")
    button(
        @click="toggleDropdown"
        class="flex items-center space-x-2 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
    )
        span(class="text-sm font-medium") {{ currentLanguageName }}
        svg(
            :class="{ 'transform rotate-180': isOpen }"
            class="w-4 h-4 transition-transform"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
        )
            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7")
    
    div(
        v-if="isOpen"
        class="absolute top-full right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50"
    )
        div(class="py-1")
            button(
                v-for="language in languages"
                :key="language.code"
                @click="changeLanguage(language.code)"
                :class="{'bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-400': currentLanguage === language.code, 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700': currentLanguage !== language.code }"
                class="w-full text-left px-4 py-2 text-sm transition-colors flex items-center space-x-2"
            )
                span {{ language.native }}
                span(
                    v-if="currentLanguage === language.code"
                    class="text-blue-600 dark:text-blue-400"
                ) ✓