<script lang="ts">
  import calendar from '../../assets/icons/calendar.svg';
  import readMore from '../../assets/icons/read-more.svg';

  import type { IPost } from '../../type/post';

  export let className = '';
  export let data: IPost | undefined;

  let createText = '';

  if (data) {
    const createDate = new Date(data.date);

    const createMonthName = createDate.toLocaleString('en', { month: 'long' });

    createText = createDate.getDate() + ' ' + createMonthName + ', ' + createDate.getFullYear();
  }
</script>

<div class="card {className}">
  <a aria-label="Read more {data?.title?.rendered}" class="card__link" href="/blog/{data?.slug ?? 'slug'}" />
  <div class="card__header">
    {#if data?.imageData?.large}
      <img src={data?.imageData?.large} alt="" class="card__image" loading="lazy" />
    {/if}
  </div>
  <div class="card__body">
    <div class="card__date">
      <div class="card__dateIcon">
        <img src={calendar} alt="" />
      </div>
      <p class="card__dateText">{createText}</p>
    </div>
    <p class="card__title">{data?.title?.rendered ?? ''}</p>
    <p class="card__desc">{data?.yoast_head_json?.og_description ?? ''}</p>
    <a class="card__button" href="/blog/{data?.slug ?? 'slug'}">
      <p class="card__buttonText">Read more</p>
      <img alt="Read more icon" class="card__buttonIcon" src={readMore} />
    </a>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 553px;
    background: $techWhite;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    @include breakpoint-down('deskL') {
      min-height: 442px;
    }

    &__link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
    }

    &__header {
      overflow: hidden;
      width: 100%;
      height: 266px;
      background: $postPoster;

      @include breakpoint-down('deskL') {
        height: 213px;
      }
    }

    &__image {
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      will-change: transform;
    }

    &__body {
      padding: 25px 24px 35px 24px;
      display: flex;
      flex-direction: column;
      flex: 1;

      @include breakpoint-down('deskL') {
        padding: 20px 16px 22px 16px;
      }

      @include breakpoint-down('deskS') {
        padding: 20px 24px 24px 24px;
      }
    }

    &__date {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      @include breakpoint-down('deskL') {
        margin-bottom: 8px;
      }

      @include breakpoint-down('deskS') {
        gap: 4px;
      }
    }

    &__dateIcon {
      width: 24px;
      min-width: 24px;
      height: 24px;
    }

    &__dateText {
      @include xSmallDefault;
    }

    &__title {
      @include baseTitle;

      margin-bottom: 16px;

      @include breakpoint-down('deskL') {
        margin-bottom: 8px;
      }
    }

    &__desc {
      @include smallDefault;

      flex: 1;
    }

    &__button {
      display: flex;
      align-items: center;
      gap: 8px;

      @include breakpoint-down('deskS') {
        gap: 12px;
      }
    }

    &__buttonText {
      @include baseCTA;
    }

    &__buttonIcon {
      width: 39px;
      height: 20px;

      @include breakpoint-down('deskL') {
        width: 31px;
        height: 16px;
      }
    }

    &:hover {
      .card__image {
        transform: scale(1.1);
      }
    }
  }
</style>