<!-- Языки вебкам-модели: флаги-ссылки на фильтр раздела вебкамов.

Логика повторяет боевой движок: первым идёт язык пользователя, если модель на нём
говорит. Флагов показываем не больше двух — у иных моделей языков с десяток.

Флаг у нас лежит файлом по коду СТРАНЫ, а провайдер отдаёт язык, поэтому код
переводится по мапе преобладающих стран; если файла всё равно нет (например для
Китая и Кореи их нет в наборе), в том же «бабле» рисуется земной шар. -->
<template>
  <span
    v-if="items.length"
    :title="t('webcams.speaks', { languages: names })"
    class="card-webcam-languages"
  >
    <a
      v-for="item in items"
      :key="`lang-${item.lang}`"
      :href="`${nichePath}/webcams?mf_language=${item.lang}`"
      :aria-label="item.lang"
      class="card-webcam-languages__link"
    >
      <span class="card-webcam-languages__flag">
        <img
          v-if="!broken[item.lang]"
          :src="`/icons/flags/${item.country}.svg`"
          :alt="item.lang"
          class="card-webcam-languages__img"
          width="20"
          height="20"
          loading="lazy"
          @error="broken[item.lang] = true"
        >
        <UiIcon
          v-else
          name="earth"
          size="14"
        />
      </span>
    </a>
  </span>
</template>

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

const props = withDefaults(defineProps<{
  /** Языки модели (ISO-коды) */
  languages?: string[]
  /** Коды флагов от провайдера — если он их прислал, они в приоритете */
  flags?: string[]
  /** Язык пользователя: его флаг показываем первым */
  firstLang?: string
  /** Префикс ниши в ссылках (`/gay`, `/shemale`; у straight пустой) */
  nichePath?: string
}>(), {
  languages: () => [],
  flags: () => [],
  firstLang: '',
  nichePath: '',
});

const FLAGS_LIMIT = 2;

const { t, locale } = useI18n();

const broken = ref<Record<string, boolean>>({});

const items = computed(() => {
  const first = (props.firstLang || locale.value).slice(0, 2).toLowerCase();

  // провайдер вместо пустого массива присылает null — дефолт пропа в этом случае
  // не срабатывает, поэтому подстраховываемся на самой границе компонента
  const flags = props.flags || [];

  const all = (props.languages || []).map((lang, index) => ({
    lang,
    country: (flags[index] || LANG_TO_FLAG[lang] || lang).toLowerCase(),
  }));

  return [...all.filter(item => item.lang === first), ...all.filter(item => item.lang !== first)]
    .slice(0, FLAGS_LIMIT);
});

/** Подпись тултипа: «Speaks Russian, English» — на языке интерфейса. */
const names = computed(() => {
  const display = new Intl.DisplayNames([locale.value], { type: 'language' });

  return (props.languages || []).map(lang => display.of(lang) || lang.toUpperCase()).join(', ');
});
</script>

<style lang="scss">
.card-webcam-languages {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.card-webcam-languages__link {
  display: flex;
}

// «бабл» из макета: круг со срезанным левым нижним углом
.card-webcam-languages__flag {
  display: grid;
  overflow: hidden;
  place-items: center;
  width: 20px;
  height: 20px;
  color: $card-webcam-languages-fallback-icon;
  background-color: $card-webcam-languages-fallback-bg;
  border: 1px solid $card-webcam-languages-border;
  border-radius: 50%;
  border-end-start-radius: 0;
}

.card-webcam-languages__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
