<!-- Круглая аватар-карточка с рамкой, названием и счётчиком (для популярного) -->
<template>
  <NuxtLink
    :to="generateLink(card.link)"
    class="card-round"
  >
    <UiImg
      :src="currentImage"
      :loading="loading"
      :alt="card.title"
      :priority="priority"
      class="card-round__img"
      width="96"
      height="96"
      sizes="96px"
      @error="onImageError"
    />
    <span
      v-if="card.newCount"
      :title="t('library.new_count', { count: card.newCount })"
      class="card-round__badge"
    >{{ card.newCount }}</span>
    <p class="card-round__title">
      {{ card.title }}
      <!--      <ClientOnly>-->
      <!--        <SCountry class="card-round__info-country"/>-->
      <!--      </ClientOnly>-->
    </p>
    <p
      v-if="!withoutCount"
      class="card-round__count"
    >
      <UiIcon
        name="cam"
        size="12"
      />
      <span class="card-round__count-text">{{ card.videosCount }}</span>
    </p>
  </NuxtLink>
</template>

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

const props = withDefaults(defineProps<{
  card: IRoundCard
  loading?: 'eager' | 'lazy'
  priority?: boolean
  placeholderAvatar?: string
  /** Только аватар и название — без счётчика роликов (страница подписок) */
  withoutCount?: boolean
}>(), {
  loading: 'lazy'
});

const { t } = useI18n();
const { generateLink } = useGenerateLink();

const fallbackImage = props.placeholderAvatar;
const imageError = ref(false);

const currentImage = computed(() => {
  if (imageError.value) return fallbackImage || '';
  return props.card.primaryImageUrl || fallbackImage || '';
});

function onImageError() {
  imageError.value = true;
}
</script>

<style lang="scss">
/* Заход бейджа внутрь круга: отступ от угла карточки подобран так, чтобы центр
   бейджа сел на границу окружности по диагонали — примерно половина снаружи.
   На мобиле аватар 80px против 96px, а бейдж не уменьшается, поэтому отступ меньше. */
$badge-inset: 3px;
$badge-inset--mobile: 1px;

.card-round {
  position: relative;
  display: grid;
  justify-content: center;
  justify-items: center;
}

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

  /* Аватар занимает всю ширину карточки, поэтому отступ от её края = заход в круг */
  position: absolute;
  top: $badge-inset;
  right: $badge-inset;
  z-index: $z-index-plus;
  display: grid;
  place-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  font-weight: 700;
  color: $card-new-badge-text;
  background-color: $card-new-badge-bg;
  border-radius: $radius-full;
  box-shadow: 0 0 0 2px $card-new-badge-ring;

  @include to-br(sm) {
    top: $badge-inset--mobile;
    right: $badge-inset--mobile;
  }
}

/* Размер задаёт ширина, высоту считает aspect-ratio: с жёсткими width/height
   глобальный `img { max-width: 100% }` срезал только ширину и круг выходил овалом. */
.card-round__img {
  width: 100%;
  max-width: var(--card-round-size);
  height: auto;
  margin-bottom: 8px;
  aspect-ratio: 1/1;
  border-radius: $radius-full;
  object-fit: cover;
  object-position: center 70%;
  border: 2px solid $card-round-border;

  @include from-br(sm) {
    transition: var(--transition) border-color, var(--transition) box-shadow;
  }
}

.card-round:is(:hover, :focus-visible) .card-round__img {
  @media (hover: hover) {
    border-color: $card-round-border--hover;
    box-shadow: $card-ring-shadow--hover;
  }
}

.card-round__count {
  @include font-xs;

  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto;
  column-gap: 4px;
  align-items: center;
  color: $card-round-subtext;
}

.card-round__count-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-round__title {
  @include font-sm;

  font-weight: 500;
  color: $card-round-text;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

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

.card-round:is(:hover, :focus-visible) .card-round__title {
  @media (hover: hover) {
    color: $card-round-text--hover;
  }
}

.card-round__info-country {
  border-radius: 50%;
  object-fit: cover;
}
</style>
