<template>
    <div class="text-sm leading-normal text-gray-800 sm:text-base prose">
        <template v-for="block in modelValue.blocks" :key="block.id">
            <h2 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 2" v-text="block.data.text"></h2>
            <h3 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 3" v-text="block.data.text"></h3>
            <h4 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 4" v-text="block.data.text"></h4>
            <div v-if="block.type === 'paragraph'" v-html="block.data.text"></div>
            <blockquote v-if="block.type === 'alert'" :class="`${alertClass[block.data.type]} rounded-lg py-2 px-4 border-2`" v-html="block.data.message"></blockquote>
            <ul v-if="block.type === 'list' && block.data.style === 'unordered'">
                <li v-for="(item, index) in block.data.items" :key="index">
                    <span v-html="item.content"></span>
                    <ul v-if="item.items.length">
                        <li v-for="(sitem, sindex) in item.items" :key="`${index}-${sindex}`">
                            <span v-html="sitem.content"></span>
                            <ul v-if="sitem.items.length">
                                <li v-for="(ssitem, ssindex) in sitem.items" :key="`${index}-${sindex}-${ssindex}`">
                                    <span v-html="ssitem.content"></span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </template>
    </div>
</template>

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

const alertClass = reactive({
    success: 'bg-green-300 border-green-600 text-green-900',
    primary: 'bg-primary border-circle text-font',
    secondary: 'bg-secondary border-circle text-font',
    info: 'bg-blue-300 border-blue-600 text-blue-900',
    light: 'bg-gray-300 border-gray-600 text-gray-900',
    dark: 'bg-gray-800 border-gray-600 text-gray-200',
    warning: 'bg-yellow-300 border-yellow-600 text-yellow-900',
    danger: 'bg-red-300 border-red-600 text-red-900',
});

const props = defineProps({
    modelValue: {
        required: true,
        validator: (value) => typeof value === 'object' && Object.keys(value).includes('blocks'),
    },
});
</script>
