<!-- Карточка спонсорского контента: логотип, заголовок, кнопка -->
<template>
  <div class="player-sponsored">
    <UiImg
      v-if="card.logo"
      :src="card.logo"
      :alt="card.title"
      class="player-sponsored__logo"
      sizes="56px"
      width="56"
      height="56"
    />
    <span class="player-sponsored__wrapper">
      <span class="player-sponsored__title">
        {{ card.title }}
        <UiLabel
          :text="$t('sponsored')"
          theme="primary-gradient"
        />
      </span>
      <span class="player-sponsored__description">{{ $t('click_to_watch') }}</span>
      <NuxtLink
        :to="card.site"
        class="player-sponsored__site"
        target="_blank"
        external
      >{{ card.site }}</NuxtLink>
    </span>
    <UiLink
      :to="card.site"
      class="player-sponsored__button _from-sm"
      theme="primary"
      target="_blank"
      external
    >{{ $t('get_full_video')}}</UiLink>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  card: {
    logo?: string
    title?: string
    site: string
  }
}>();
</script>

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

.player-sponsored__logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.player-sponsored__button {
  grid-column: 3;
}

.player-sponsored__title {
  @include font-xs;

  font-weight: 700;
  display: flex;
  align-items: center;
  column-gap: 4px;
}

.player-sponsored__wrapper {
  display: grid;
  row-gap: 4px;
}

.player-sponsored__site,
.player-sponsored__description {
  @include font-xs;

  font-weight: 400;
}

.player-sponsored__site {
  color: $video-sponsored-site-text;

  @include hover(opacity) {
    opacity: 0.9;
  }
}
</style>
