<template>
  <section
    v-if="items && items.length > 0"
    class="category-group"
  >
    <UiLetter
      v-if="text"
      :text="text"
    />
    <h2
      v-else-if="title"
      class="category-group__title _title"
    >
      <UiIcon
        v-if="icon"
        :name="icon"
        class="category-group__title-icon"
        prefix="categories"
        size="24"
      />
      {{ title }}</h2>
    <GridCategories
      :categories="items"
      priority
    >
    <!--    <div-->
    <!--        v-if="allLink"-->
    <!--        class="category-group__more"-->
    <!--    >-->
    <!--      <UiImg-->
    <!--          alt="category-image"-->
    <!--          class="category-group__more-img"-->
    <!--          sizes="50vw sm:30vw md:250px"-->
    <!--          :src="items[0].thumbUrl || ''"-->
    <!--          width="176"-->
    <!--          height="88"-->
    <!--      />-->
    <!--      <UiLink-->
    <!--          :to="allLink"-->
    <!--          class="category-group__more-button"-->
    <!--          theme="primary"-->
    <!--      >{{ t('more') }}</UiLink>-->
    <!--    </div>-->
    </GridCategories>
  </section>
</template>

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

defineProps<{
  items: ICategoryCard[] | null
  icon?: string
  allLink?: string
  text?: string
  title?: string
}>();
</script>

<style lang="scss">
.category-group {
  display: grid;
  row-gap: 16px;
  align-items: start;
  align-content: start;
}

.category-group__title {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 0;
}

.category-group__title-icon {
  color: $categories-section-icon;
}

// .category-group__more {
//  position: relative;
//  display: grid;
//  place-content: center;
//  aspect-ratio: 16/9;
//  overflow: hidden;
// }
//
// .category-group__more::after {
//  position: absolute;
//  inset: 0;
//  content: '';
//  background: linear-gradient(0deg, $bg-fade-90 0%, $bg-fade-90 100%);
// }
//
// .category-group__more-img {
//  position: absolute;
//  inset: 0;
//  border-radius: 8px;
//  width: 100%;
//  height: 100%;
// }
//
// .category-group__more-button {
//  position: relative;
//  z-index: $z-index-plus;
//  text-transform: capitalize;
//  aspect-ratio: 16/9;
// }
</style>
