<template>
  <div class="faq relative">
    <Container class="container">
      <h2 class="title max-w-xl font-bold text-60 text-gray-1200 mb-64 mobile:text-24">
        Frequently Asked Questions
      </h2>
      <div class="flex justify-between">
        <div class="flex justify-between">
          <div class="items">
            <ul class="list flex flex-col justify-center gap-24">
              <FaqItem
                v-for="(item, index) in items"
                :key="index"
                :is-active="activeItemIndex === index"
                :item="item"
                @toggle="onItemToggle(index)"
              />
            </ul>
          </div>
        </div>
        <img
          :src="bubblesIllustration"
          class="absolute top-64 right-16 tablet:-right-256 mobile:hidden"
          alt="bubbles"
          loading="lazy"
          width="320"
          height="256"
        >
      </div>
    </Container>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Bubbles from './Bubbles.vue';
import { IFaq } from './Faq.types';
import Container from '@/components/ui/Container.vue';
import FaqItem from '@/components/blocks/Faq/FaqItem.vue';
import bubblesIllustration from '@/assets/img/pages/lead-research/bubbles-rotated.svg?url';

const INITIAL_SELECTED_INDEX = -1;

export default defineComponent({
  components: { FaqItem, Container, Bubbles },

  props: {
    items: {
      type: Array as PropType<IFaq.Item[]>,
      required: true,
    },
  },

  data: () => ({
    activeItemIndex: INITIAL_SELECTED_INDEX,
    bubblesIllustration,
  }),

  methods: {
    onItemToggle(index: number) {
      this.activeItemIndex = index === this.activeItemIndex
        ? INITIAL_SELECTED_INDEX
        : index;
    }
  }
});
</script>