<script lang="ts">
export default {
    props: {
        categoryData: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        return {
            category: props.categoryData
        }
    },
    methods: {
        abbreviate(text: number) {
            return Intl.NumberFormat('en-US', {
                //@ts-ignore
                notation: 'compact',
                maximumFractionDigits: 1
            }).format(text)
        },
    }
}
</script>

<template>
    <div class="bg-ctp-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
        <router-link :to="`/game/${category.name}`">
            <img :src="category.image" class="rounded-lg rounded-b-none" />
        </router-link>

        <div class="p-2">
            <div>
                <p class="font-bold text-white text-xl sm:text-base md:text-xl">
                    {{ category.displayName }}
                </p>
                <p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p>
            </div>

            <ul class="h-8 overflow-hidden">
                <li v-for="tag in category.tags" :key="tag" class="inline-flex">
                    <span class="p-2.5 py-1.5 bg-ctp-surface0 rounded-md m-0.5 text-xs font-bold text-white">{{ tag
                    }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>