<template>
  <div class="overflow-hidden">
    <div class="pb-container bg-white py-[40px] flex justify-center gap-[10%]"
    :class="{'justify-start md:!px-0 !ml-0': section?.align_left}">
      <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full" :class="{'!max-w-full' : section?.align_left}">
        <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
          <p v-if="header?.supporting_text"
             class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto"
             v-html="header.supporting_text"></p>
        </div>
        <div v-if="featureComponents[index]" class="flex flex-col divide-y gap-8">
          <div v-for="(link, index) in featureComponents[index].data"
               class="relative bg-white w-full pt-6">
            <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
              <span class="hover:underline" @click="toggle(index)">
                {{ link.title }}
              </span>
              <span class="min-w-[24px]">
                <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
                <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
              </span>
            </a>
            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset ql-editor" v-html="link.supporting_text"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
import Plus from "@/assets/img/icons/plus-circle.svg";
import Minus from "@/assets/img/icons/minus-circle.svg";
import "quill/dist/quill.snow.css";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const show = ref([]);
const headerComponents = computed(() => {
  return section.value.components.filter((component) => component.type === "header");
});

const featureComponents = computed(() => {
  return section.value.components.filter((component) => component.type === "faqs");
});

featureComponents.value.forEach((value, index) => {
  show.value[index] = false;
})

const toggle = (index) => {
  show.value[index] = !show.value[index];
};

</script>