<!-- Карточка канала: обложка 16:9, логотип, статистика (видео/подписчики/дата) -->
<template>
  <NuxtLink
    :to="generateLink(`/channels/${slug}`)"
    class="card-channel"
  >
    <div class="card-channel__img-wrapper">
      <UiImg
        :src="currentImage"
        :urls="card.thumbUrls"
        :sizes="`(max-width: ${CSS_BREAKPOINTS.lg}px) 50vw, 480px`"
        :alt="card.name"
        :loading="priority ? 'eager' : 'lazy'"
        :priority="priority"
        class="card-channel__img"
        width="480"
        height="270"
        @error="onImageError"
      />
      <UiLabel
        v-if="card.isNetwork"
        :text="$t('network')"
        class="card-channel__label"
        theme="primary"
      />
    </div>
    <div class="card-channel__container">
      <img
        v-if="card.avatarUrl"
        :src="card.avatarUrl"
        :alt="card.name"
        class="card-channel__logo _from-xs"
        width="32"
        height="32"
      >
      <span
        v-else
        class="card-channel__logo --placeholder _from-xs"
      >
        {{ logoPlaceholder }}
      </span>
      <span class="card-channel__title _truncate">{{ card.name }}
      </span>
      <div class="card-channel__info-wrapper">
        <p
          v-for="(item, index) in infoItems"
          :key="`channel-info-${index}`"
          class="card-channel__info"
        >
          <UiIcon
            :name="item.icon"
            size="14"
          />
          {{ item.text }}
        </p>
      </div>
    </div>
  </NuxtLink>
</template>

<script setup lang="ts">
import { convertString, formatDate } from '../../runtime';
import type { IChannelCard } from '../../types';
import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';

const props = defineProps<{
  card: IChannelCard
  priority?: boolean
}>();

const { n } = useI18n();

const imageError = ref(false);

const placeholderImage = '/img/placeholder.webp';
const { generateLink } = useGenerateLink();

const currentImage = computed(() => {
  if (imageError.value || !props.card.thumbUrls) return placeholderImage;
  return undefined;
});

function onImageError() {
  imageError.value = true;
}

const logoPlaceholder = computed(() => props.card.name.charAt(0));

const slug = computed(() => convertString().toSlug(props.card.name));

type InfoItem = {
  text: string | number
  icon: string
}

const infoItems = computed<InfoItem[]>(() => [
  {
    text: props.card.videosCount,
    icon: 'video-camera'
  },
  {
    text: n(95000, 'compact'), // TODO тестовое
    icon: 'double-user'
  },
  {
    text: formatDate(props.card.updated),
    icon: 'date'
  },
]);
</script>

<style lang="scss">
.card-channel {
  border-radius: $radius-xl;
  overflow: hidden;
  border: 1px solid $channel-card-border;
  background-color: $channel-card-bg;

  @include hover(border-color, box-shadow) {
    border-color: $channel-card-border--hover;
    box-shadow: $card-ring-shadow--hover;
  }
}

.card-channel__img-wrapper {
  position: relative;
  aspect-ratio: 16/9;
}

.card-channel__label {
  position: absolute;
  top: 4px;
  right: 4px;
  width: max-content;
}

.card-channel__container {
  display: grid;
  padding: 16px;
  column-gap: 12px;

  @include from-br(xs) {
    grid-template-columns: auto 1fr;
  }
}

.card-channel__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.card-channel__logo.--placeholder {
  @include font-sm;

  $size: 32px;

  width: $size;
  height: $size;
  display: grid;
  place-content: center;
  border-radius: $radius-full;
  text-transform: uppercase;
  font-weight: 700;
  color: $channel-card-placeholder-text;
  background-color: $channel-card-placeholder-bg;
}

.card-channel__logo {
  @include from-br(xs) {
    grid-row: 1/3;
    grid-column: 1;
    border-radius: 50%;
    object-fit: cover;
  }
}

.card-channel__info-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  margin-top: 4px;
  grid-row: 2;

  @include from-br(xs) {
    grid-column: 2;
  }
}

.card-channel__info {
  @include font-xs;

  color: $channel-card-info;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 4px;
}

.card-channel__info:last-child {
  margin-left: auto;
}

.card-channel__title {
  @include font-sm;

  font-weight: 600;
  color: $channel-card-title;

  @include hover(color) {
    color: $channel-card-title--hover;
  }
}
</style>
