<!-- Шапка блока вебкамов: заголовок с иконкой, счётчики онлайна и промо-кнопка.

Заголовок нишезависимый: у straight общий ключ, у остальных ниш — свой
(`webcams.live_cams_gay`), если он есть в локали. Кнопка ведёт по той же партнёрской ссылке, что и пункт в шапке сайта,
а если блокировщик её снёс (нулевая высота после рендера) — на свой раздел
вебкамов. -->
<template>
  <header class="webcam-header">
    <h2 class="webcam-header__title">
      <WebcamIcon/>
      {{ title }}
    </h2>

    <WebcamCounters :counts="counts"/>

    <a
      ref="promoRef"
      :href="promoHref"
      class="webcam-header__promo"
      target="_blank"
      rel="nofollow noopener sponsored"
    >
      <span class="webcam-header__promo-text">{{ t(`webcams.more_online.${niche}`) }}</span>
      <span class="webcam-header__promo-short">{{ t('webcams.more') }}</span>
      <UiIcon
        name="chevron-right"
        size="16"
      />
    </a>
  </header>
</template>

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

defineProps<{
  counts: IWebcamCounts
}>();

const { t, te } = useI18n();

const webcamsConfig = computed(() => (useRuntimeConfig().public.webcamsConfig || {}) as IWebcamsConfig);
const niche = computed(() => NicheHelper.getSiteDefaultNiche() || 'straight');
const nichePath = computed(() => (niche.value === 'straight' ? '' : `/${niche.value}`));

/**
 * Заголовок нишевый: у straight — общий, у остальных ниш берём собственный ключ
 * (`webcams.live_cams_gay`), если локаль его знает. Так каждый язык формулирует
 * сам — подстановка названия ниши в шаблон давала тавтологии вроде
 * «транс-трансляции».
 */
const title = computed(() => {
  const nicheKey = `webcams.live_cams_${niche.value}`;

  return te(nicheKey) ? t(nicheKey) : t('webcams.live_cams');
});

const promoLink = computed(() => {
  const links = webcamsConfig.value.promoLinks || {};

  return links[niche.value] || links['straight'] || '';
});
const isPromoBlocked = ref(false);
const promoHref = computed(() => (isPromoBlocked.value ? `${nichePath.value}/webcams` : promoLink.value));

const promoRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // блокировщик мог снести промо-кнопку — тогда ведём на свой раздел вебкамов
  requestAnimationFrame(() => {
    isPromoBlocked.value = !!promoRef.value && promoRef.value.getBoundingClientRect().height === 0;
  });
});
</script>

<style lang="scss">
.webcam-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.webcam-header__title {
  @include font-xl;

  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.webcam-header__promo {
  @include font-sm;

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

  &:is(:hover, :focus) {
    background-color: $webcam-header-promo-bg--hover;
  }

  @include from-br(xm) {
    padding-inline: 16px;
  }
}

.webcam-header__promo-text {
  display: none;

  @include from-br(xm) {
    display: block;
  }
}

.webcam-header__promo-short {
  @include from-br(xm) {
    display: none;
  }
}
</style>
