<template>
  <div class="groups-container">
    <Banner page="spaces-listing" :add="['spaces', 'spaces_categories']" />

    <TemplateContainer size="l">
      <GroupBy
        :static-data="fetchedData"
        root-path="spaces.data"
        class="groups-categories-listing"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import GroupBy from '@inside-links/components/lib/GroupBy'

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

export default {
  name: 'GroupsContainer',
  components: { Banner, TemplateContainer, GroupBy },
  props: {
    fetchedData: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.groups-container {
  .groups-categories-listing {
    margin-top: var(--spacing-xl);

    .data-container {
      @include tablet {
        grid-template-columns: 1fr !important;
      }
    }
  }
}
</style>
