<!-- Карточка-ссылка библиотеки: иконка-плитка, ряд аватарок «что внутри» (десктоп), заголовок и счётчик -->
<template>
  <NuxtLink
    :to="to"
    class="library-item"
  >
    <span class="library-item__head">
      <span class="library-item__icon">
        <UiIcon
          :name="icon"
          size="22"
        />
      </span>

      <span
        v-if="avatars && avatars.length"
        class="library-item__preview"
      >
        <span
          v-for="(avatar, index) in avatars"
          :key="`${avatar.title}-${index}`"
          :style="{ zIndex: avatars.length - index }"
          :title="avatar.title"
          class="library-item__avatar"
        >
          <UiImg
            v-if="avatar.avatarUrl && !failedAvatars.includes(index)"
            :src="avatar.avatarUrl"
            :alt="avatar.title"
            class="library-item__photo"
            width="40"
            height="40"
            @error="failedAvatars.push(index)"
          />
          <span
            v-else
            class="library-item__initials"
          >{{ getNameInitials(avatar.title) }}</span>
        </span>

        <span
          v-if="restCount"
          class="library-item__rest"
        >+{{ restCount }}</span>
      </span>
    </span>

    <h3 class="library-item__title">{{ title }}</h3>

    <span
      v-if="subtitle"
      class="library-item__subtitle"
    >{{ subtitle }}</span>
  </NuxtLink>
</template>

<script setup lang="ts">
import { getNameInitials } from '../../utils/player-channel/get-name-initials';
import type { ILibraryItemAvatar } from '../../types';

defineProps<{
  to: string
  icon: string
  title: string
  /** Счётчик под заголовком: «128 videos», «3 private · 1 public» */
  subtitle?: string
  /** Первые подписки внутри раздела — ряд аватарок, виден только на широкой карточке */
  avatars?: ILibraryItemAvatar[]
  /** Сколько подписок не влезло в ряд: плашка «+8» в его хвосте */
  restCount?: number
}>();

const failedAvatars = ref<number[]>([]);
</script>

<style lang="scss">
.library-item {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: $library-item-bg;
  border: 1px solid $library-item-border;
  border-radius: $radius-xl;

  @include hover(background-color, border-color) {
    background-color: $library-item-bg--hover;
    border-color: $library-item-border--hover;
  }
}

.library-item__head {
  display: flex;
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
  margin-bottom: 32px;
}

.library-item__icon {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: $library-item-icon;
  background-color: $library-item-icon-bg;
  border: 1px solid $library-item-icon-border;
  border-radius: $radius-xl;

  @media (hover: hover) {
    transition: var(--transition) background-color, var(--transition) border-color;
  }
}

@media (hover: hover) {
  .library-item:is(:hover, :focus-visible) .library-item__icon {
    background-color: $library-item-icon-bg--hover;
    border-color: $library-item-icon-border--hover;
  }
}

/* Ряд аватарок занимает больше половины карточки: показываем, только когда она реально широкая */
.library-item__preview {
  display: none;
}

@include from-br(sm) {
  @include from-cq(220px) {
    .library-item__preview {
      display: flex;
      align-items: center;
    }
  }
}

.library-item__avatar,
.library-item__rest {
  display: grid;
  place-content: center;
  overflow: hidden;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid $library-item-avatar-border;
  border-radius: $radius-full;
}

.library-item__avatar {
  background-color: $library-item-avatar-bg;
}

.library-item__avatar:not(:first-child),
.library-item__rest {
  margin-inline-start: -11px;
}

.library-item__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.library-item__initials {
  @include font-3xs;

  font-weight: 700;
  color: $library-item-avatar-text;
}

.library-item__rest {
  @include font-3xs;

  font-weight: 600;
  color: $library-item-rest-text;
  background-color: $library-item-rest-bg;
}

.library-item__subtitle {
  @include font-sm;

  margin-top: 4px;
  color: $library-item-subtitle;
}

.library-item__title {
  @include font-base;

  margin: 0;
  font-weight: 600;
  color: $library-item-title;

  @media (hover: hover) {
    transition: var(--transition) color;
  }
}

@media (hover: hover) {
  .library-item:is(:hover, :focus-visible) .library-item__title {
    color: $library-item-title--hover;
  }
}
</style>
