<template>
  <span v-if="category">
    <slot :category="category">
      {{ category.categoryName }}
    </slot>
  </span>
  <span v-else>--</span>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'CategoryRenderer',
  props: {
    categoryId: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    ...mapState('category', ['categoryList']),
    category() {
      return this.categoryList.find(cat => String(cat.categoryId) === String(this.categoryId));
    }
  }
};
</script>
