<template>
  <div class="instrument-filter">
    <filter-group :title="`Alle ${$flavor.textInstruments}`" data-cy="filter-all-instruments" />

    <filter-group
      :types="category.types"
      :category="category"
      :title="category.name"
      v-for="category in instrumentCategories"
      :key="category.id"
    />
  </div>
</template>

<script>
import FilterGroup from '@/components/instruments/FilterGroup';

import INSTRUMENT_CATEGORIES_QUERY from 'gql/queries/instrumentCategoriesQuery.gql';

export default {
  components: {
    FilterGroup,
  },
  data() {
    return {
      instrumentCategories: [],
    };
  },

  apollo: {
    instrumentCategories: {
      query: INSTRUMENT_CATEGORIES_QUERY,
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.instrument-filter {
  display: flex;
  flex-direction: column;
}
</style>
