<template>
  <section id="faq" class="faq">
    <h3>{{ headline }}</h3>
    <Accordion v-if="accordionItems.length" :items="accordionItems" />
    <p v-else>Loading...</p>

    <div class="row mt-4">
      <div class="col-md-6 mb-3">
        <h4> {{ $t('faqBox.questions') }} </h4>
      </div>
      <div class="col-md-6">
        <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
          {{ button }}
        </button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/stores/main'
import { useHtmlConverter } from '~/composables/useHTMLConverter'

const { t } = useI18n()
const { convertToHTML } = useHtmlConverter()

const props = defineProps({
  pageLink: { type: String, required: true },
  headline: { type: String, required: false },
  button: { type: String, required: false },
})

// Fallbacks im Setup definieren, falls keine Props übergeben wurden
const headline = computed(() => props.headline ?? t('faqBox.faqsDefault'))
const button = computed(() => props.button ?? t('faqBox.btnDefault'))

const mainStore = useMainStore()

const accordionItems = computed(() =>
  mainStore.getFaqsByPageLink(props.pageLink).map(faq => ({
    title: faq.question,
    html:  convertToHTML(faq.answer)
  }))
)

const toggleContactBubble = () => mainStore.toggleContactBubble()
</script>



  
  <style lang="sass">
  .faq
      width: 80%
      margin: 2rem auto
      h3
          font-size: 1.4rem
          font-family: 'Mainfont-Bold'
      h4
          font-size: 1.4rem
          font-family: 'Mainfont-Bold'
          margin-top: .6rem
  </style>
  