<script setup lang="ts">
import {useAdaptive} from "#adata-ui/composables/useAdaptive";

interface Item {
  title: string
  link: string
}

interface Props {
  label: string
  link: string
  content: Item[]
}

defineProps<Props>()

const { t } = useI18n()

const device = useAdaptive()
const open = ref(false)
function toFinalValues(el: HTMLDivElement) {
  el.style.height = el.scrollHeight + 'px'
  el.style.opacity = '1'
}

function onAfterEnter(el: HTMLDivElement) {
  el.style.height = ''
}

const filterCheck = computed(()=>{
  if (open.value){
    return open.value
  } else {
    return open.value = !device.value.isMobile
  }
})
</script>

<template>
  <div class="flex flex-col ">
    <div
      class="flex gap-2 justify-between "
    >
      <nuxt-link-locale class="text-sm" :to="link">
        {{ label }}
      </nuxt-link-locale>


      <div
        class="transition-all lg:hidden cursor-pointer"
        :class="{'rotate-180': open}"
        @click="open =!open"
      >
        <a-icon-chevron-down
          v-if="content.length"
          filled
          :font-controlled="false"
          class="w-6 h-6  "
        />
      </div>
    </div>
    <transition
      name="accordion"
      @enter="toFinalValues"
      @after-enter="onAfterEnter"
      @before-leave="toFinalValues"
    >
      <div
        v-if="filterCheck"
        class="mt-2 flex flex-col gap-2"
      >
        <nuxt-link-locale
          v-for="(item,idx) in content"
          :key="idx"
          class="text-xs"
          :to="item.link.replace(/\/$/, '')"
        >
          {{ t(item.title) }}
        </nuxt-link-locale>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.accordion-enter-active,
.accordion-leave-active {
  overflow: hidden;
  transition: height 0.3s ease,
  opacity 0.3s ease,
  margin 0.3s ease;

}

.accordion-enter-from,
.accordion-leave-to {
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
}

</style>

<!--          <div-->
<!--            class="text-sm font-semibold-->
<!--                   cursor-pointer"-->
<!--          >-->
<!--            {{ link.title }}-->
<!--          </div>-->
<!--          <div class="flex flex-col gap-2">-->
<!--            <nuxt-link-->
<!--              v-for="(item,idx) in link.items"-->
<!--              :key="idx"-->
<!--              class="text-xs"-->
<!--              :to="item.link"-->
<!--            >-->
<!--              {{ item.title }}-->
<!--            </nuxt-link>-->
<!--          </div>-->
