<!-- Плитка «показать ещё» в сетке коллекций: 16 размытых обложек сеткой 4×4, поверх счётчик и подпись -->
<template>
  <NuxtLink
    :to="generateLink(to)"
    class="card-collections-more"
  >
    <span
      v-if="images.length > 0"
      class="card-collections-more__thumbs"
      aria-hidden="true"
    >
      <UiImg
        v-for="(src, index) in images"
        :key="`collections-more-thumb-${index}`"
        :src="src"
        :width="ThumbSize.Small.split('x')[0]"
        :height="ThumbSize.Small.split('x')[1]"
        alt=""
        class="card-collections-more__thumb"
      />
    </span>

    <span class="card-collections-more__content">
      <span
        v-if="count"
        class="card-collections-more__count"
      >+{{ count }}</span>
      <span class="card-collections-more__text">{{ text }}</span>
    </span>
  </NuxtLink>
</template>

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

const props = defineProps<{
  to: string
  text: string
  /** Обложки для мозаики: лишние отбрасываем, если меньше 16 — повторяем по кругу */
  thumbs?: IThumbUrls[]
  /** Сколько коллекций осталось за кадром — «+18» */
  count?: number
}>();

const { generateLink } = useGenerateLink();

/** Ячеек в мозаике — сетка 4×4 */
const CELLS = 16;

const images = computed(() => {
  const sources = (props.thumbs || [])
    .map(thumb => thumb?.webp?.[ThumbSize.Small])
    .filter((src): src is string => Boolean(src));

  if (sources.length === 0) return [];

  /* добиваем по кругу, чтобы мозаика всегда была полной, а не с дырами */
  return Array.from({ length: CELLS }, (_, index) => sources[index % sources.length]);
});
</script>

<style lang="scss">
.card-collections-more {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 240px;
  padding: 12px;
  overflow: hidden;
  text-align: center;
  border-radius: $radius-xl;
  border: 1px solid $collections-more-border;
  background-color: $collections-more-bg;

  @include hover(border-color) {
    border-color: $collections-more-border--hover;

    &::after {
      background-color: $collections-more-scrim--hover;
    }
  }

  /* затемнение поверх обложек — псевдоэлементом, без отдельной ноды-оверлея */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: $collections-more-scrim;
    transition: var(--transition) background-color;
  }
}

.card-collections-more__thumbs {
  position: absolute;
  inset: 0;
  display: grid;

  /* minmax(0, 1fr), иначе auto-минимум трека = min-content картинки и сетка распирает блок */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 2px;
  filter: blur(12px);
  transform: scale(1.1);
}

.card-collections-more__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-collections-more__content {
  position: relative;
  z-index: $z-index-plus;
  display: grid;
  row-gap: 2px;
}

.card-collections-more__count {
  @include font-3xl;

  font-weight: 700;
  color: $collections-more-count;
}

.card-collections-more__text {
  @include font-sm;

  font-weight: 500;
  color: $collections-more-text;
}
</style>
