<template>
  <section class="category-by-letter">
    <div
      v-for="(items, letter) in categories"
      :key="`category-by-letter-${String(letter)}`"
      class="category-by-letter__block"
    >
      <UiLetter :text="getLetter(letter)" />
      <CategoryList :items="items" />
    </div>
  </section>
</template>

<script setup lang="ts">
import type { ICategoryCard } from '../../types';

defineProps<{
  categories: Record<string, Array<ICategoryCard>>
}>();

function getLetter(letter: string) {
  if (letter.toLowerCase() === 'post') {
    return '#';
  }
  return letter;
}
</script>

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

  @include to-br(sm) {
    max-width: calc(100vw - calc(var(--container-padding-inline) * 2));
    overflow: auto;
  }
}

.category-by-letter__block {
  display: flex;
  gap: 16px;
  align-items: start;
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;

  @include to-br(sm) {
    flex-direction: column;
  }
}

.category-by-letter__block:first-of-type {
  border-top: none;
  padding-top: 0;
}
</style>
