<script setup>
    import { defineProps } from 'vue';

    const props = defineProps({
        block: {
            type: Object,
            required: true,
        },
    });

    const faqs = props.block.faqs || [
        { question: 'Hva er dette?', answer: 'Dette er et eksempel på et spørsmål og svar.' },
        { question: 'Hvordan fungerer det?', answer: 'Du legger til innhold og publiserer siden.' },
    ];
</script>

<template>
    <section class="relative py-20 md:py-24 overflow-hidden mx-auto max-w-[1280px] bg-black">
        <div class="container mx-auto px-6 lg:px-20">
            <h2 class="text-amber-600 text-xl md:text-2xl font-serif mb-6">{{ block.title || 'Vanlige spørsmål' }}</h2>
            <div class="space-y-4">
                <details v-for="(faq, index) in faqs" :key="index" class="bg-gray-700 p-4 rounded-md shadow">
                    <summary class="cursor-pointer font-medium text-white">{{ faq.question }}</summary>
                    <p class="mt-2 text-gray-300">{{ faq.answer }}</p>
                </details>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* Optional collapse styles */
</style>
