<template>
    <details
        v-if="$t(`${base}.${question}`, [], false)"
        :class="['border mb-3', small ? 'small' : '']"
        itemscope
        itemprop="mainEntity"
        itemtype="https://schema.org/Question"
        @click="$emit('click')"
    >
        <summary :class="['bg-light', small ? 'p-2' : 'p-3']" itemprop="name">
            <T>{{ base }}.{{ question }}.question</T>
        </summary>
        <div :class="['border-top', small ? 'p-2' : 'p-3']" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <T itemprop="text">{{ base }}.{{ question }}.answer</T>
        </div>
    </details>
</template>

<script>
export default {
    props: {
        question: { required: true },
        small: { type: Boolean },
        base: { default: 'faq.questions' },
    },
};
</script>
