<template>
  <div class="categories q-py-md q-px-lg">
    <categories-group
      v-for="(group, groupName) in groupsCounting"
      :key="groupName"
      :counting="group.groupCount"
      :total-count="group.allCount"
      :category-group="groupName"
    />
  </div>
</template>

<style scoped lang="sass">
.categories
  & > div:not(:first-of-type)
    margin-top: 32px
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { CategoryGroupCounting } from '@/widgets/tasks/types/Category'
import CategoriesGroup from '@/widgets/tasks/components/categories/CategoriesGroup.vue'

@Component({
  components: { CategoriesGroup },
})
export default class Categories extends Vue {
  @Prop({ type: Object, required: true })
  groupsCounting!: CategoryGroupCounting
}
</script>
