<template>
  <div class="blog-card">
    <a :href="links.post" target="_blank">
      <div class="image">
        <ImageWebpWrapper
          v-if="!customImage"
          :image-default="imageUrl.default"
          :image-webp="imageUrl.webp"
          width="610"
          height="280"
          :lazy-load-enable="false" />
        <img v-else v-lazy="imageUrl" width="610" height="280" />
        <ReadingTimeLabel :value="article.time" class="reading-time" />
      </div>
    </a>
    <div class="info">
      <div class="date">{{ formattedDate }}</div>
      <div class="divider"></div>
      <div class="category">
        <a :href="links.category" target="_blank">
          {{ article.category.name }}
        </a>
      </div>
    </div>
    <a :href="links.post" target="_blank">
      <h3 class="title">{{ article.title }}</h3>
      <div class="description">{{ article.previewText }}</div>
      <div class="author">by {{ article.author.name }}</div>
    </a>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IBlog } from '@/database/blog/blog.types';
import ReadingTimeLabel from '@/components/ui/ReadingTimeLabel.vue';
import dayjs from 'dayjs';
import { getImage, ImageWebp } from '@/utils/imageResolver';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: { ImageWebpWrapper, ReadingTimeLabel },

  props: {
    article: {
      type: Object as PropType<IBlog.PostPreview>,
      required: true,
    },
    customImage: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    links(): { post: string; category: string } {
      const { slug, category } = this.article;
      return {
        post: `/blog/${category.slug}/${slug}`,
        category: `/blog/${category.slug}`,
      };
    },
    imageUrl(): ImageWebp | string {
      return this.customImage
        ? this.article.imagePreviewFile
        : getImage(this.article.imagePreviewFile, {
            width: 610,
            height: 280,
          });
    },
    formattedDate(): string {
      return dayjs(this.article.date).format('DD MMM YYYY');
    },
  },
});
</script>

<style lang="scss">
.blog-card {
  display: block;
  width: 100%;
  max-width: 610px;
}

.image {
  position: relative;

  width: 100%;
  height: 280px;
  margin-bottom: 32px;
  overflow: hidden;

  border-radius: 16px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.4s ease-out;

    .blog-card:hover & {
      transform: scale(1.13);
    }
  }

  .reading-time {
    top: 0;
    right: 48px;

    //@include media(tabletDraft) {
    //  right: 32px;
    //}
  }
}

.info {
  display: flex;
  align-items: center;
  margin-bottom: 24px;

  color: #3c3d3e;
  font-size: 14px;
  column-gap: 12px;

  .category {
    text-decoration: underline;

    transition: color 0.4s ease-out;

    &:hover {
      color: #ff5f21;
    }
  }

  .divider {
    width: 4px;
    height: 4px;

    background: #242628;
    border-radius: 50%;
  }
}

.title {
  margin-bottom: 12px;

  color: #242628;
  font-weight: bold;
  font-size: 26px;
  line-height: 140%;
}

.description {
  display: -webkit-box;
  margin-bottom: 24px;
  overflow: hidden;

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

.author {
  color: #7d7f82;
  font-size: 16px;
}
</style>
