<!-- Карточка категории: обложка, название с флагом, счётчик видео -->
<template>
  <NuxtLink
    :title="card.title"
    :to="generateLink(`/categories/${convertString().toSlug(slug)}`)"
    class="card-category"
  >
    <div class="card-category__inner">
      <UiImg
        :alt="card.title"
        :src="currentImage"
        :loading="priority ? 'eager' : 'lazy'"
        :priority="priority"
        class="card-category__img"
        sizes="320px"
        width="320"
        height="180"
        @error="onImageError"
      />
      <div class="card-category__wrapper">
        <div class="card-category__wrapper-header">
          <span class="card-category__title">
            {{ card.title }}
            <img
              v-if="card.icon"
              :src="`/icons/flags/${card.icon}.svg`"
              :alt="card.icon"
              class="card-category__icon"
              width="17"
              height="17"
              loading="lazy"
            >
          </span>
          <span
            v-if="card.newCount"
            class="card-category__badge"
          >{{ $t('library.new_count', { count: card.newCount }) }}</span>
          <span
            v-else
            class="card-category__count"
          >
            <UiIcon
              name="video-camera"
              size="14"
            />
            {{ $n(card.videosCount, 'compact') }}
          </span>
        </div>
      </div>
    </div>
  </NuxtLink>
</template>

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

const props = defineProps<{
  card: ICategoryCard
  priority?: boolean
}>();

const imageError = ref(false);

const placeholderImage = '/img/placeholder.webp';

const currentImage = computed(() => {
  if (imageError.value) return placeholderImage;
  return props.card.thumbUrls?.webp?.[ThumbSize.Small] || placeholderImage;
});

function onImageError() {
  imageError.value = true;
}

const { generateLink } = useGenerateLink();

const slug = computed(() => {
  return props.card.name;
});
</script>

<style lang="scss">
.card-category {
  padding: 2px;
  border-radius: $radius-xl;

  @include hover(box-shadow) {
    box-shadow: $card-ring-shadow--hover;
  }
}

.card-category__inner {
  border-radius: $radius;
  border: 1px solid $category-card-border;
  background-color: $category-card-bg;
  overflow: hidden;

  @include hover(border-color) {
    border-color: $category-card-border--hover;
  }
}

.card-category__title {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 8px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: $category-card-title;

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

.card-category__icon {
  width: 17px;
  height: 12px;
  object-fit: cover;
  align-self: start;
  margin-top: 5px;
  flex-shrink: 0;
}

.card-category:is(:hover, :focus-visible) .card-category__title {
  @media (hover: hover) {
    color: $category-card-title--hover;
  }
}

.card-category__wrapper {
  padding: 12px;
  background-color: $category-card-wrapper-bg;
}

.card-category__img {
  width: 100%;
  height: auto;
}

.card-category__count {
  @include font-xs;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  color: $category-card-subtext;
}

.card-category__wrapper-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.card-category__badge {
  @include font-3xs;

  display: grid;
  place-content: center;
  height: 20px;
  padding-inline: 6px;
  font-weight: 700;
  white-space: nowrap;
  color: $card-new-badge-text;
  background-color: $card-new-badge-bg;
  border-radius: $radius-full;
}
</style>
