<template>
  <section class="relative z-50 ml-4">
    <div v-for="({ question, answer }, index) in questions" :key="index" class="mb-16">
      <button
        type="button"
        @click="toggleFAQ(index)"
        class="flex gap-12 mb-5 items-baseline font-bold"
      >
        <UiParagraph as="span" size="600">
          {{ question }}
        </UiParagraph>
        <img
          src="/assets/icon/arrow.svg"
          alt="question"
          class="duration-500"
          :class="activeIndex === index ? 'rotate-90' : 'rotate-0'"
        />
      </button>
      <Transition name="slide">
        <div v-show="activeIndex === index">
          <UiParagraph size="300">
            {{ answer }}
          </UiParagraph>
        </div>
      </Transition>
    </div>
  </section>
</template>

<script setup lang="ts">
import UiParagraph from '~/components/Typography/UiParagraph.vue'
import questions from './_data/question-answer.json'

const activeIndex = ref<null | number>(null)

const toggleFAQ = (index: number) => {
  activeIndex.value = activeIndex.value === index ? null : index
}

useHead({
  title: 'Вопрос - ответ | Vino Galante',
})
</script>
