<script setup lang="ts">
withDefaults(defineProps<{
    question: string;
    small?: boolean;
    base?: string;
}>(), {
    base: 'faq.questions',
});

const details = useTemplateRef('details');
const focus = () => {
    if (!details.value) {
        return;
    }
    details.value.open = true;
    details.value.focus();
    details.value.scrollIntoView();
    setTimeout((_) => {
        details.value?.scrollIntoView();
    }, 1000);
};

defineExpose({ focus });
</script>

<template>
    <details
        v-if="$t(`${base}.${question}`, {}, false)"
        ref="details"
        :class="['border mb-3', small ? 'small' : '']"
        itemscope
        itemprop="mainEntity"
        itemtype="https://schema.org/Question"
    >
        <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>
