<!-- Блок редакционных подборок: заголовок с бейджем, ссылка «все» и сетка карточек + плитка «ещё» -->
<template>
  <section
    v-if="items.length > 0"
    class="section-collections"
  >
    <header class="section-collections__header">
      <UiSectionTitle
        :title="t('collections_by')"
        title-tag="h2"
        variant="section"
      >
        <span class="section-collections__badge">{{ t('editorial') }}</span>
      </UiSectionTitle>

      <UiLink
        :to="generateLink(COLLECTIONS_LINK)"
        theme="secondary"
        class="section-collections__link"
      >
        {{ t('following.view_all') }}
        <UiIcon
          name="arrow-right"
          size="16"
        />
      </UiLink>
    </header>

    <GridPlaylists
      :items="items"
      no-actions
    >
      <CardCollectionsMore
        :to="COLLECTIONS_LINK"
        :text="t('show_more_collections')"
        :thumbs="restThumbs"
        :count="restCount"
      />
    </GridPlaylists>
  </section>
</template>

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

const props = withDefaults(defineProps<{
  dataItems: IPlaylistCard[]
  /** Сколько карточек показать до плитки «ещё» */
  limit?: number
}>(), {
  limit: 3,
});

const COLLECTIONS_LINK = '/playlists/collections';

/** Сетка 4×4 в плитке «ещё» */
const THUMBS_LIMIT = 16;

const { t } = useI18n();

const { generateLink } = useGenerateLink();

const items = computed(() => (props.dataItems || []).slice(0, props.limit));

const rest = computed(() => (props.dataItems || []).slice(props.limit));

const restCount = computed(() => rest.value.length);

/** Обложки для плитки «ещё»: сначала по первой от каждой скрытой подборки, потом по вторым и так далее */
const restThumbs = computed(() => {
  const byIndex = (index: number) => rest.value
    .map(item => item.thumbUrls?.[index])
    .filter((thumb): thumb is IThumbUrls => Boolean(thumb));

  return [0, 1, 2, 3].flatMap(index => byIndex(index)).slice(0, THUMBS_LIMIT);
});
</script>

<style lang="scss">
.section-collections {
  margin-bottom: 40px;
}

.section-collections__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  margin-bottom: 16px;
}

.section-collections__badge {
  @include font-3xs;

  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding-block: 2px;
  padding-inline: 8px;
  font-weight: 600;
  color: $collections-badge-text;
  background-color: $collections-badge-bg;
  border: 1px solid $collections-badge-border;
  border-radius: $radius-full;
}

.section-collections__link {
  flex-shrink: 0;
}
</style>
