<script setup>
import { reactive, onMounted } from "vue";
import UPageCard from "@nuxt/ui/components/PageCard.vue";
import { fetchNodeArticle, fetchMainNavigationMenu } from "../utils/fetch_data";
const articles = reactive([]);
onMounted(async () => {
    try {
        const data = await fetchNodeArticle();
        const list = (Array.isArray(data) ? data : (data != null ? [data] : []));

        // Strip HTML tags and truncate `body.value` of each article (if present)
        for (const item of list) {
            if (item.body && typeof item.body.value === 'string') {
                const parser = new DOMParser();
                const doc = parser.parseFromString(item.body.value, 'text/html');
                let textContent = doc.body.textContent || "";
                if (textContent.length > 100) {
                    textContent = textContent.slice(0, 200) + '…';
                }
                item.body.value = textContent;
            }
        }
        articles.splice(0, articles.length, ...list);
    } catch (err) {
        console.error("[article-card-nuxt-ui] Failed to fetch articles", err);
    }
});
</script>
<template>
    <!-- No Content found -->
    <div v-if="!articles || articles.length === 0">
        <UPageCard
        title="No Content found"
        description="Pending to load content from Drupal API"
        icon="i-lucide-lightbulb"
        spotlight
        spotlight-color="primary"
        :ui="{root: 'mb-5 w-full'}"
    >
    </UPageCard>
    </div>

    <!-- Content found -->
    <div v-if="articles && articles.length > 0">
        <UPageCard
            v-for="(article, index) in articles"
            :key="index"
            :title="article.title"
            icon="i-lucide-lightbulb"
            spotlight
            spotlight-color="primary"
            :ui="{root: 'mb-5 w-full'}"
        >
            <template v-if="article.body?.value" >
                <div v-html="article.body.value"  />
            </template>
        </UPageCard>
    </div>
</template>