<template>
    <section class="mb-10">
        <div class="flex items-center gap-3 border-b-2 border-primary-500 pb-3 mb-6">
            <Icon :name="section.icon" size="28" class="text-primary-500"/>
            <h2 class="text-xl font-bold text-primary-500">{{ section.title }}</h2>
        </div>
        <div class="space-y-8 pl-2">
            <DocumentationArticle
                v-for="article in section.articles"
                :key="article.id"
                :article="article"
            />
        </div>
    </section>
</template>

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

defineProps<{
    section: DocSection
}>()
</script>
