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

    <div class="row mt-4">
      <div class="col-md-6 mb-3">
        <h4> Noch Fragen? </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 { useMainStore } from '@/stores/main'
import { useHtmlConverter } from '~/composables/useHTMLConverter'
const { convertToHTML } = useHtmlConverter()

const props = defineProps({
  pageLink: { type: String, required: true },
  headline: { type: String, default: "Häufig gestellte Fragen (FAQs)" },
  button: { type: String, default: "Sprechen Sie uns gerne an!" },
})

const mainStore = useMainStore()

const accordionItems = computed(() =>
  mainStore.getFaqsByPageLink(props.pageLink).map(faq => ({
    title: faq.question,
    html:  convertToHTML(faq.answer)   // <- hier passiert die Umwandlung
  }))
)

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>
  