<template>
  <div class="languageBox" @click="toggleOpen">
    <div v-if="!open" class="current">{{ currentLanguage }}</div>

    <transition name="slide">
      <div v-if="open" class="options">
        <span
          v-for="localeItem in locales"
          :key="localeItem.code"
          :class="{ active: localeItem.code === locale }"
          @click.stop="selectLanguage(localeItem.code)"
        >
          {{ localeItem.code }}
        </span>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const { locales, setLocale, locale } = useI18n()

const open = ref(false)

const toggleOpen = () => {
  open.value = !open.value
}

const selectLanguage = (code) => {
  setLocale(code)
  open.value = false // nach Auswahl schließen
}

const currentLanguage = computed(() => locale.value.toUpperCase())
</script>

<style lang="sass">
.languageBox
  position: relative
  display: block
  align-items: center
  background: white
  border: 1px solid #ccc
  border-top-left-radius: 1rem
  border-bottom-left-radius: 1rem
  padding: 1rem .8rem 1rem 1rem
  cursor: pointer
  font-family: sans-serif
  text-transform: uppercase
  overflow: hidden
  user-select: none
  touch-action: manipulation
  z-index: 14
  .current
    font-weight: bold
    font-size: 1.2rem

  .options
    display: inline-flex
    margin-left: .5rem
    gap: 0.5rem
    span
      cursor: pointer
      transition: all 0.3s ease
      font-size: 1.1rem
      &:hover
        //font-weight: bold
        font-size: 1.2rem
        transform: scale(1.2)
      &.active
        font-weight: bold
        font-size: 1.2rem
      &:not(:last-child)::after
        content: '|'
        margin-left: 0.5rem
        color: $pink
        font-weight: normal

  .slide-enter-active, .slide-leave-active
    transition: all 0.3s ease
  .slide-enter-from, .slide-leave-to
    opacity: 0
    transform: translateX(-10px)
</style>