<template>
  <section>
    <a class="" @click="openModal()">FAQ</a>
  </section>
</template>

<script>
import Vue from "vue";
import { Modal} from "buefy";
import ModalGeneral from "./ModalGeneral.vue";
import ModalFP from "./ModalFP.vue";
import ModalPop from "./ModalPop.vue";
import ModalWage from "./ModalWage.vue";
Vue.use(Modal);

export default {
  props: [
    'lang',
    'faq'
  ],
  computed: {
    toggleLang: function() {
      return this.lang;
    }
  }, // end computed
  methods: {
     openModal: function() {
      this.$buefy.modal.open({
        props: { 'lang': this.toggleLang},
        parent: this,
        component: this.faq == "fp" ? ModalFP : this.faq == "pop" ? ModalPop : this.faq == "wage" ? ModalWage : ModalGeneral,
        hasModalCard: true
      });
    }
  } // end methods
}
</script>

<style>
.footerSourceModal h3 {
  margin: 1em 0 !important;
}
.footerSourceModal p {
  margin-bottom: 1em !important;
}
.footerSourceModal ul {
  list-style: inside !important;
  list-style-type: disc !important;
  padding-bottom: 10px !important;
}
.footerSourceModal a {
  color: #3273dc !important;
}
.footerSourceModal-head {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.footerSourceModal-title {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.footerSourceModal-foot {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
</style>
