<!-- Счётчики онлайна вебкам-моделей: всего и на языке пользователя.

Компонент сам решает, что показывать: общий счётчик рисуется, когда провайдер
вернул общее количество, языковой — когда в разбивке по языкам есть язык интерфейса.
Поэтому снаружи достаточно отдать сырые счётчики, а условия и подбор флага
наружу не протекают.

Это информация, а не переход: плашки намеренно не ссылки. -->
<template>
  <div
    v-if="total || languageCount"
    class="webcam-counters"
  >
    <span
      v-if="total"
      class="webcam-counters__item"
    >
      <span class="webcam-counters__pulse"/>
      {{ t('webcams.online_now', { count: $n(total) }) }}
    </span>

    <span
      v-if="languageCount"
      class="webcam-counters__item --language"
    >
      <span class="webcam-counters__pulse"/>
      <img
        :src="`/icons/flags/${languageFlag}.svg`"
        :alt="languageCode"
        class="webcam-counters__flag"
        width="20"
        height="14"
        loading="lazy"
      >
      {{ t('webcams.language_online', { lang: languageCode.toUpperCase(), count: $n(languageCount) }) }}
    </span>
  </div>
</template>

<script setup lang="ts">
import type { IWebcamCounts } from '../../types';
import { LANG_TO_FLAG } from '../../utils/webcams/lang-to-flag';

const props = defineProps<{
  counts: IWebcamCounts
}>();

const { t, locale } = useI18n();

const total = computed(() => props.counts.total || 0);
const languageCode = computed(() => locale.value.slice(0, 2).toLowerCase());
const languageFlag = computed(() => LANG_TO_FLAG[languageCode.value] || languageCode.value);
const languageCount = computed(() => props.counts.byLanguages?.[languageCode.value] || 0);
</script>

<style lang="scss">
.webcam-counters {
  display: contents;
}

.webcam-counters__item {
  @include font-sm;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-weight: 500;
  color: $webcam-counters-text;
  background-color: $webcam-counters-bg;
  border-radius: $radius-lg;

  &.--language {
    color: $webcam-counters-language-text;
    background-color: $webcam-counters-language-bg;
  }
}

.webcam-counters__pulse {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: $webcam-counters-dot;
  border-radius: 50%;

  // «дышащий» ореол вокруг точки — индикатор живого онлайна из макета
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: $webcam-counters-dot;
    border-radius: 50%;
    animation: webcam-counters-pulse 1.6s cubic-bezier(0, 0, .2, 1) infinite;
  }
}

@keyframes webcam-counters-pulse {
  75%,
  100% {
    opacity: 0;
    scale: 2;
  }
}

.webcam-counters__flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: $radius-small;
}
</style>
