<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>
            <ul class="space-y-4">
                <li v-for="(faq, index) in faqs" :key="index" class="border-b pb-4">
                    <h3 class="text-lg font-semibold text-gray-200">{{ faq.question }}</h3>
                    <p class="text-gray-300">{{ faq.answer }}</p>
                </li>
            </ul>
        </div>
    </section>
</template>

<style scoped>
/* Optional FAQ list styles */
</style>
