<template>
  <a :href="links.post" class="case-study" rel="nofollow" target="_blank">
    <div class="top">
      <VTag class="label" target-blank to="/case-studies" type="dark">
        Case Studies
      </VTag>
      <div class="logo">
        <ImageWebpWrapper :image="imageUrl" width="168" height="45" />
      </div>
    </div>
    <div class="title">{{ post.title }}</div>
    <Results :background-color="resultsBackground" :results="post.results" />

    <div class="description">{{ post.summary }}</div>

    <div class="bottom">
      <Tags :post="post" class="tags" />

      <div class="arrow">
        <img v-lazy="arrowIcon" width="35" height="25" class="arrow-icon" />
      </div>
    </div>
  </a>
</template>

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

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

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

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

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

      return {
        post: `/case-studies/${category?.slug}/${slug}`,
        category: `/case-studies/${category?.slug}`,
        industry: `/case-studies?industry=${industry?.slug}`,
      };
    },
    imageUrl(): ImageWebp {
      return this.getImage(this.post.customer.logo, {
        width: 168,
        height: 45,
      });
    },
  },

  methods: {
    getImage,
  },
});
</script>

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

  display: flex;
  flex-direction: column;
  height: 480px;
  padding: 28px 32px 32px 32px;

  background: #ffffff;
  border-radius: 16px;
  backdrop-filter: blur(20px);

  transition: box-shadow 0.3s ease-out;
}

.title {
  display: none;
}

.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.logo {
  width: 168px;
  height: 45px;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.description {
  display: -webkit-box;
  overflow: hidden;

  color: #3c3d3e;
  font-size: 16px;
  line-height: 180%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bottom {
  display: flex;
  align-items: flex-end;
  justify-self: flex-end;
  margin-top: auto;

  column-gap: 20px;
}

.tags {
  flex-direction: column !important;
  align-items: flex-start !important;
  row-gap: 10px !important;
}

.arrow {
  display: flex;
  flex-direction: column;
  justify-content: center;

  margin-left: auto;

  color: #3c3d3e;

  transition: 0.3s color linear;

  .case-study:hover & {
    @apply text-orange-600 ;
    .arrow-icon {
      filter: contrast(100%) grayscale(0%);
    }
  }
}

.arrow-icon {
  filter: contrast(1000%) grayscale(100%);

  transition: filter 0.3s ease-out;
}
</style>
