<script setup lang="ts">
const props = defineProps<{topics?: any[]}>()
</script>
<template>
    <div v-if="topics?.length" class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
        <div class="flex order-2 gap-4 xl:order-1">
            <h3 class="text-xl font-semibold after:content-[':'] whitespace-nowrap">Chủ đề</h3>
            <div class="flex items-center gap-4 flex-wrap">
                <NuxtLink v-for="(item, index) in topics" :key="index" :to="{ name:'topic-topicSlug', params:{ topicSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
                    {{ item?.title }},
                </NuxtLink>
            </div>
        </div>
    </div>
</template>