<!-- Мини-карточка видео: постер 16:9 слева, название, канал, длительность -->
<template>
  <component
    :is="component"
    :title="card.title"
    :to="link ? generateLink(`/playlists/${prefix}/${card.id}`) : null"
    class="card-video-mini"
  >
    <UiImg
      :src="currentPoster"
      :alt="card.title"
      class="card-video-mini__img"
      sizes="140px"
      width="1600"
      height="900"
      @error="onPosterError"
    />
    <div class="card-video-mini__wrapper">
      <p class="card-video-mini__title _truncate">{{ card.title }}</p>
      <span
        v-if="card.channelName"
        class="card-video-mini__channel _truncate"
      >{{ card.channelName }}</span>
      <span class="card-video-mini__duration">
        <UiIcon
          name="time"
          size="12"
        />
        {{ duration }}</span>
    </div>
  </component>
</template>

<script setup lang="ts">
import type { IVideoCard } from '../../../types';
import { getDuration, ThumbSize } from '../../../runtime';

const props = defineProps<{
  card: IVideoCard
  link?: boolean
  prefix?: string
}>();

const posterError = ref(false);

const duration = computed(() => {
  return getDuration(props.card.duration);
});

const component = computed(() => {
  if (props.link) {
    return resolveComponent('NuxtLink');
  }
  return 'div';
});

const { generateLink } = useGenerateLink();

const posterPlaceholder = '/img/placeholder.webp';

const currentPoster = computed(() => {
  if (posterError.value) return posterPlaceholder;
  return props.card.thumbUrls?.webp?.[ThumbSize.Small] || posterPlaceholder;
});

function onPosterError() {
  posterError.value = true;
}
</script>

<style lang="scss">
.card-video-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: start;

  @include from-br(sm) {
    column-gap: 16px;
  }
}

.card-video-mini__img {
  aspect-ratio: 16/9;
  width: 140px;
  height: auto;
  border-radius: $radius;

  @include from-br(sm) {
    width: 112px;
  }
}

.card-video-mini__title {
  --line-clamp: 2;

  @include font-md;

  max-width: 270px;
  color: var(--video-mini-card-title, #{$video-mini-card-title});

  @include from-br(sm) {
    @include font-sm;

    margin-bottom: 4px;
  }
}

.card-video-mini__wrapper {
  display: grid;
  padding-top: 2px;
}

.card-video-mini__channel {
  @include font-2xs;

  color: var(--video-mini-card-channel, #{$video-mini-card-channel});

  @include from-br(sm) {
    @include font-xs;
  }
}

.card-video-mini__duration {
  @include font-2xs;

  display: flex;
  align-items: center;
  column-gap: 6px;
  margin-top: 2px;
  color: var(--video-mini-card-duration, #{$video-mini-card-duration});

  @include from-br(sm) {
    @include font-xs;
  }
}
</style>
