<template>
    <article :id="`doc-${article.id}`" class="scroll-mt-6">
        <h3 class="text-lg font-bold text-primary-500 mb-3">{{ article.title }}</h3>
        <div class="space-y-3">
            <template v-for="(block, idx) in article.blocks" :key="idx">
                <p v-if="block.type === 'paragraph'" class="text-sm text-neutral-700 leading-relaxed">
                    {{ block.content }}
                </p>
                <ul v-else-if="block.type === 'list'" class="list-disc list-inside space-y-1 text-sm text-neutral-700 pl-2">
                    <li v-for="(item, i) in block.content.split('\n')" :key="i">{{ item }}</li>
                </ul>
                <div v-else-if="block.type === 'note'" class="bg-tertiary-500 border-l-4 border-primary-500 p-3 rounded-r-md">
                    <p class="text-sm text-neutral-700 leading-relaxed">{{ block.content }}</p>
                </div>
            </template>
        </div>
    </article>
</template>

<script setup lang="ts">
import type { DocArticle } from '~/types/documentation'

defineProps<{
    article: DocArticle
}>()
</script>
