<template>
  <div class="text-h2 flex items-center ui-gap-x-sm">
    {{ groupLabel }}
    <ui-badge :label="count.toString()" />
  </div>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { CategoryGroup } from '@/widgets/tasks/types/Category'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'
import UiBadge from '@/lib-components/UiBadge.vue'

@Component({
  components: { UiBadge },
})
export default class CategoryTitle extends Vue {
  @Prop({ type: String, required: true })
  categoryGroup!: CategoryGroup

  @Prop({ type: Number, required: true })
  count!: CategoryGroup

  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  get groupLabel(): string {
    return this.categoryModule.getGroupTitle(this.categoryGroup)
  }
}
</script>
