<template>
  <router-link :to="postLink">
    <div class="case">
      <div class="top">
        <div class="logo">
          <ImageWebpWrapper
            v-if="post.customer.logo"
            :image="customerLogo"
            width="168"
            height="60"
            :lazy-load-enable="false" />
        </div>
        <Tags :post="post" class="tags-desktop" />
        <div class="arrow">
          <img v-lazy="buttonArrow" width="32" height="32" />
        </div>
      </div>

      <div class="title">{{ post.title }}</div>

      <div class="content">
        <Results
          :background-color="resultsBackground"
          :results="post.results" />
        <Description :post="post" />
      </div>

      <div class="bottom">
        <Tags :post="post" />
        <div class="arrow">
          <img v-lazy="buttonArrow" width="24" height="24" />
        </div>
      </div>
    </div>
  </router-link>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import type { CaseStudiesInterface } from '@/database/case-studies/caseStudies.types';
import Results from './Results.vue';
import Tags from '@/components/pages/case-studies/Cases/CaseCard/Tags.vue';
import Description from '@/components/pages/case-studies/Cases/CaseCard/Description.vue';
import { getImage, ImageWebp } from '@/utils/imageResolver';
import buttonArrow from '@/assets/img/static-icons/arrow/arrow-right-long-orange.svg?url';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: { ImageWebpWrapper, Description, Tags, Results },

  props: {
    post: {
      type: Object as PropType<CaseStudiesInterface.PostPreview>,
      required: true,
    },
    resultsBackground: {
      type: String as PropType<'orange' | 'white'>,
      default: 'white',
    },
  },

  data: () => ({
    buttonArrow,
  }),

  computed: {
    postLink(): string {
      const { slug, category } = this.post;

      return `/case-studies/${category.slug}/${slug}`;
    },
    customerLogo(): ImageWebp {
      return getImage(this.post.customer.logo, {
        height: 60,
        width: 168,
      });
    },
  },
  methods: {
    getImage,
  },
});
</script>

<style lang="scss" scoped>
.case {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 96px;
  padding: 40px 65px 50px 65px;

  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e8e8e8;

  border-radius: 10px;
  backdrop-filter: blur(20px);

  transition: all 0.3s;
  animation: fadein 0.4s;

  &:hover {
    box-shadow: 0 17px 50px rgba(255, 95, 33, 0.12);
  }
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.logo {
  width: 168px;
  height: 60px;
  :deep(img) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
  }
}

.title {
  display: -webkit-box;
  max-width: 700px;
  margin-bottom: 30px;
  overflow: hidden;

  color: #262626;
  font-weight: 700;
  font-size: 36px;
  line-height: 136%;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.content {
  display: flex;
}

.bottom {
  display: none;

  .arrow {
    padding-bottom: 6px;
  }
}

.arrow {
  color: #3c3d3e;

  filter: contrast(1000%) grayscale(100%);

  transition: 0.3s color ease-out;

  .case:hover & {
    color: #ff5f21;

    filter: contrast(100%) grayscale(0%);
  }
}

@keyframes fadein {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>
