<!-- Сетка вебкам-тумб: те же колонки, что у основной сетки видео (2 / 3 / 4).

Компонент отвечает только за раскладку и за выбор обёртки провайдера: обёртка
берётся из мапы адаптеров по конфигу и рендерится через `<component :is>`, так
что сетка не знает ни про Stripcash, ни про формат его полей.

События тумб (клик и появление постера) уходят наружу вместе с индексом — сквозной
индекс тумбы на странице нужен статистике, а карточка про страницу не знает. -->
<template>
  <ul class="grid-webcams">
    <li
      v-for="(model, index) in items"
      :key="`webcam-${model.id || model.username}`"
      class="grid-webcams__item"
    >
      <component
        :is="adapter"
        :item="model"
        :touch-preview="isMobile"
        :first-lang="locale"
        @click="emit('model-click', { model, index })"
        @poster="element => emit('model-view', { model, index, element })"
      />
    </li>
  </ul>
</template>

<script setup lang="ts">
import type { IStripcashModel, IWebcamsConfig } from '../../types';
import { WEBCAMS_DEFAULTS } from '../../runtime';
import { resolveWebcamAdapter } from '../../utils/webcams/adapters';

defineProps<{
  items: IStripcashModel[]
}>();

/**
 * Клики и показы тумб сетка отдаёт наружу: индексы она знает, а куда их
 * отправлять — дело сайта (у статистики свой контекст страницы и устройства).
 */
const emit = defineEmits<{
  'model-click': [payload: { model: IStripcashModel, index: number }]
  'model-view': [payload: { model: IStripcashModel, index: number, element: HTMLElement }]
}>();

const { locale } = useI18n();
const isMobile = useState<boolean>('isMobile');

const webcamsConfig = computed(() => (useRuntimeConfig().public.webcamsConfig || {}) as IWebcamsConfig);

/** Обёртка активного провайдера: ленивый импорт из мапы адаптеров. */
const provider = computed(() => String(webcamsConfig.value.provider || WEBCAMS_DEFAULTS.provider));
const adapter = computed(() => defineAsyncComponent(resolveWebcamAdapter(provider.value)));
</script>

<style lang="scss">
.grid-webcams {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  @include from-br(xs) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @include from-br(xm) {
    gap: 24px;
  }

  @include from-br(md) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid-webcams__item {
  min-width: 0;
}
</style>
