<template>
    <div class="post-tags">
        <h3>{{ $t('tags') }}:</h3>
        <ul>
            <li v-for="(tag, i) in post.tags" :key="i">
                <router-link :to="`/blog?tag=${tag}`">
                    <span>{{ tag }}</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { post } = inject('data')
</script>

<style lang="scss">
.post-tags {
    @apply flex items-center gap-3 lg:gap-4 px-6;

    h3 {
        @apply text-zinc-900 font-medium font-vazir leading-[1.9rem] whitespace-nowrap;
        @apply text-xs lg:text-lg pt-1.5 lg:pt-0;
    }

    ul {
        @apply flex flex-wrap items-center;
        @apply gap-1.5 lg:gap-4;

        a {
            @apply bg-[#F2F2F2] rounded-[0.3rem] lg:rounded-[0.6rem] flex items-center justify-center;
            @apply px-4 h-7 lg:h-[2.4rem];

            span {
                @apply text-[#333333] font-normal font-vazir leading-[1.9rem];
                @apply text-xs lg:text-lg;
            }
        }
    }
}
</style>
