<script setup lang="ts">
const props = defineProps<{ tags?: any[] }>();

</script>

<template>
    <div v-if="tags?.length"
        class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
        <div id="article-tags" class="flex order-2 gap-4 xl:order-1">
            <h3 class="text-xl font-semibold after:content-[':']">Tag</h3>
            <div class="flex items-center gap-4 flex-wrap">
                <template v-for="(item, index) in tags" :key="index">
                    <div v-if="item.code">
                        <nuxt-link :to="{ name: 'tag-tagSlug', params:{ tagSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
                        {{ item?.title }}
                    </nuxt-link>
                    </div>
                </template>

            </div>
        </div>
    </div>
</template>