<!-- Карточка канала с аватаром, счётчиком видео и кнопкой подписки -->
<template>
  <NuxtLink
    :to="link"
    class="player-follow"
  >
    <UiImg
      :src="card.avatarUrl || '/img/logo-placeholder.svg'"
      :alt="$t('channel_logo')"
      class="player-follow__img"
      sizes="48px"
      width="48"
      height="48"
    />
    <div class="player-follow__wrapper">
      <p class="player-follow__title">{{ card.name }}</p>
      <p class="player-follow__count">{{ $t('plural.videos', Number(card.videosCount)) }}</p>
    </div>
    <UiBtn
      v-if="featureFlags.FeatureFollowEnabled"
      theme="primary"
      @click="onButtonClick"
    >
      <UiIcon
        name="follow"
        size="16"
      />
      {{ $t('follow') }}
    </UiBtn>
  </NuxtLink>
</template>

<script setup lang="ts">
import { convertString, AuthSteps } from '../../runtime';
import type { IChannelCard } from '../../types';
import { AuthorizationApiService } from '../../services/api/authorization.service';

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

const featureFlags = useRuntimeConfig().public.featureFlags;
const { generateLink } = useGenerateLink();

const emit = defineEmits<{
  (eventName: 'click'): void
}>();

const authPopupText = 'register_first';

function onButtonClick() {
  if (useUser(AuthorizationApiService).isAuthorized.value) {
    emit('click');
  } else {
    useAuthPopup().openAuthPopup(AuthSteps.Login, authPopupText);
  }
}

const link = computed(() => generateLink(`/channels/${convertString().toSlug(props.card.name)}`));
</script>

<style lang="scss">
.player-follow {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  border-radius: 16px;
  column-gap: 8px;
  background-color: $video-follow-bg;
  color: $video-follow-text;

  @include from-br(sm) {
    padding: 8px 16px 8px 8px;
  }
}

.player-follow__img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.player-follow__title {
  @include font-xs;

  font-weight: 700;
}

.player-follow__count {
  @include font-xs;

  font-weight: 400;
  color: $video-follow-count;
}
</style>
