<template>
    <div class="ctaBox">
      <h3 v-if="headline">{{ headline }}</h3>
      <p v-if="text">{{ text }}</p>
      <span v-if="content" v-html="content"></span>
      <button class="btn pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
        {{ buttonText }}
      </button>
    </div>
  </template>
  
  <script setup>
  import { useMainStore } from '@/stores/main'
  
  const mainStore = useMainStore()
  
  const toggleContactBubble = () => {
    mainStore.toggleContactBubble()
  }
  
  const props = defineProps({
    headline: { type: String, required: false },
    text: { type: String, required: false },
    content: { type: String, required: false },
    buttonText: { type: String, required: true }
  })
  </script>
  
  <style scoped lang="sass">
  .ctaBox
    margin: 8rem 10%
    text-align: center
    h3
      font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
  </style>
  