<template>
  <div v-if="!loading" class="flex items-center">
    <MiniMap class="mx-4" style="min-width: 440px" />

    <div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
      <a
        v-for="(cat, index) in categories"
        :key="index"
        class="
          block
          text-gray-600
          hover:text-gray-700 hover:bg-hover-light
          dark:text-gray-200
          p-2
          w-full
        "
        :href="`${$config.forum_url}/c/${cat.slug}/${cat.id}`"
        target="_blank"
        rel="noopener noreferrer"
      >
        <span
          class="badge-category-bg"
          :style="`background-color: #${cat.color};`"
        />
        <span class="">{{ cat.name }}</span>
        <span class="text-gray-400">x {{ cat.topic_count }}</span>
      </a>
    </div>
  </div>
  <div v-else class="h-80 flex items-center">
    <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
  </div>
</template>

<script>
import { fetchCategories } from '~/libs/api-forum'

export default {
  name: 'LayoutHeaderMenuForum',
  data() {
    return {
      categories: [],
      loading: false,
    }
  },
  async beforeMount() {
    this.loading = true
    this.categories = await fetchCategories()
    this.loading = false
  },
}
</script>

<style lang="postcss" scoped>
.badge-category-bg {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  display: inline-block;
}
</style>