<template>
  <section class="category-letter-groups">
    <div
      v-for="(groupItems, letter) in grouped"
      :key="`category-letter-groups-${String(letter)}`"
      class="category-letter-groups__block"
    >
      <UiLetter :text="String(letter)" />
      <slot :items="groupItems" />
    </div>
  </section>
</template>

<script setup lang="ts" generic="T extends Record<string, any>">
import { groupByFirstLetter } from '../../utils/category-letter-groups/group-by-first-letter';

const props = defineProps<{
  items: T[];
  titleKey?: string;
}>();

const grouped = computed(() => groupByFirstLetter(props.items, props.titleKey));
</script>

<style lang="scss">
.category-letter-groups {
  display: grid;
  row-gap: 20px;

  @include from-br(sm) {
    row-gap: 48px;
  }
}

.category-letter-groups__block {
  display: grid;
  row-gap: 16px;
}
</style>
