<template>
  <a
    :href="data.link"
    rel="nofollow"
    target="_blank"
    class="youtube-review"
    :class="color"
    :style="style">
    <ImageWebpWrapper
      :image="data.backgroundImage"
      :width="data.backgroundImage.width"
      :height="data.backgroundImage.height"
      class="bg-image" />
    <div class="content">
      <h3 class="customer-name">{{ data.customerName }}</h3>
      <div class="customer-position">{{ data.customerPosition }}</div>
      <div class="description">{{ data.content }}</div>
      <div class="bottom">
        <VButton icon-left="youtube" size="medium">Watch on youtube</VButton>
        <VTag class="tag" :type="tagColor">Testimonials</VTag>
        <div class="belkins-logo">
          <img v-lazy="{ src: logo }" width="101" height="102" />
        </div>
      </div>
    </div>
  </a>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IFeedbackGrid } from '@/components/sections/FeedbackGrid/FeedbackGrid.types';
import VButton from '@/components/ui/common/VButton.vue';
import VTag from '@/components/ui/common/VTag.vue';
import logoDark from '@/assets/img/pages/appointment-setting/belkins-logo-dark.svg?url';
import logoLight from '@/assets/img/pages/appointment-setting/belkins-logo.svg?url';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: { ImageWebpWrapper, VTag, VButton },

  props: {
    color: {
      type: String as PropType<'light' | 'dark'>,
      default: 'light',
    },
    data: {
      type: Object as PropType<IFeedbackGrid.YoutubeReview>,
      required: true,
    },
  },

  computed: {
    style(): Partial<CSSStyleDeclaration> {
      return {
        backgroundColor: this.data.backgroundColor,
      };
    },

    logo(): string {
      return this.color === 'dark' ? logoLight : logoDark;
    },

    tagColor(): 'white' | 'dark' {
      return this.color === 'dark' ? 'white' : 'dark';
    },
  },
});
</script>

<style lang="scss" scoped>
.youtube-review {
  position: relative;

  display: block;
  height: 300px;
  padding: 32px;
  overflow: hidden;

  border-radius: 16px;
}

.content {
  position: relative;
  z-index: 1;
}

.customer-name {
  color: #242628;
  font-weight: bold;
  font-size: 36px;
  line-height: 136%;

  .dark & {
    color: #ffffff;
  }
}

.customer-position {
  margin-bottom: 14px;

  color: #3c3d3e;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;

  .dark & {
    color: #b1b2b4;
  }
}

.description {
  max-width: 320px;

  color: #3c3d3e;
  font-size: 16px;
  line-height: 180%;

  .dark & {
    color: #dfe0e1;
  }
}

.bottom {
  display: flex;
  align-items: center;

  column-gap: 16px;

  .belkins-logo {
    margin-left: auto;
  }

  .tag {
  }
}

.bg-image:deep(img) {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;

  width: auto;
  height: 100%;
  object-fit: contain;
}
</style>
