<!-- Мини-карточка плейлиста: мозаика обложек слева + название/автор -->
<template>
  <div class="card-playlist-mini">
    <div
      :class="[
        `--${card.thumbUrls?.length > 3 ? '4' : `${card.thumbUrls?.length}`}-child`,
        {'--empty': !card.thumbUrls?.length},
      ]"
      class="card-playlist-mini__img-wrapper"
    >
      <UiImg
        v-for="(item, index) in card.thumbUrls"
        :key="`playlist-mini-image-${index}`"
        :src="getCurrentImage(index)"
        :alt="card.name"
        class="card-playlist-mini__img"
        width="320"
        height="180"
        sizes="120px"
        @error="onImageError(index)"
      />
    </div>
    <div class="card-playlist-mini__wrapper">
      <p class="card-playlist-mini__name">{{ card.name }}</p>
      <p class="card-playlist-mini__user">{{ $t('by') }} {{ card.username }}</p>
      <span class="card-playlist-mini__count">
        <UiIcon
          name="video-camera"
          size="16"
        />
        {{ card.videosCount }}
      </span>
    </div>
  </div>
</template>

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

const props = defineProps<{
  card: IPlaylistCard
}>();

const placeholderImage = '/img/placeholder.webp';
const imageErrors = ref<Record<number, boolean>>({});

function onImageError(index: number) {
  imageErrors.value[index] = true;
}

function getCurrentImage(index: number) {
  if (imageErrors.value[index]) return placeholderImage;
  return props.card.thumbUrls?.[index]?.webp?.[ThumbSize.Small] || placeholderImage;
}
</script>

<style lang="scss">
.card-playlist-mini {
  display: grid;
  grid-template-columns: 112px 1fr;
  column-gap: 16px;
  align-items: center;
}

.card-playlist-mini__img-wrapper {
  aspect-ratio: 16/9;
  display: grid;
  border-radius: $radius-lg;
  overflow: hidden;
}

.card-playlist-mini__img-wrapper.--2-child {
  grid-template-columns: 1fr 1fr;
}

.card-playlist-mini__img-wrapper.--4-child,
.card-playlist-mini__img-wrapper.--3-child {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.card-playlist-mini__img-wrapper.--3-child .card-playlist-mini__img:first-child {
  grid-column: 1;
  grid-row: 1/3;
}

.card-playlist-mini__img-wrapper.--empty {
  display: grid;
  place-content: center;
  background: linear-gradient(to bottom right in oklab, $playlist-card-mini-empty-gradient-from, $playlist-card-mini-empty-gradient-to);
  color: $playlist-card-mini-empty-text;
}

.card-playlist-mini__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-playlist-mini__name {
  @include font-base;

  font-weight: 500;
  color: $playlist-card-mini-name;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-playlist-mini__user {
  @include font-sm;

  color: $playlist-card-mini-user;
  margin-top: 6px;
}

.card-playlist-mini__count {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 4px;
  margin-top: 2px;
  color: $playlist-card-mini-count;
}
</style>
