<script lang="ts">
  import { getLocaleUrl, getRouteByPostType, t, locale, defaultLocale } from '$lib/translations';
  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($locale, { month: 'long' });

    createText = $locale === defaultLocale ? createDate.getDate() + ' ' + createMonthName + ', ' + createDate.getFullYear() : createDate.toLocaleDateString($locale, {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
</script>

<div class="card {className}">
  <a aria-label="Read more {data?.title?.rendered}" class="card__link" href="{getLocaleUrl(`/${getRouteByPostType(data?.type ?? '')}/${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="{getLocaleUrl(`/blog/${data?.slug ?? 'slug'}`)}">
      <p class="card__buttonText">{$t('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: 480px;
    background: $techWhite;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid $techBlue2;
    transition: box-shadow 0.2s ease;

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

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

    &__header {
      overflow: hidden;
      width: 100%;
      height: 240px;
      background: $postPoster;
      border-radius: 16px 16px 0 0;

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

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

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

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

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

    &__date {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;

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

    &__dateIcon {
      width: 20px;
      min-width: 20px;
      height: 20px;
      opacity: 0.6;
    }

    &__dateText {
      font-size: 12px;
      line-height: 18px;
      color: $techBlueSecondary;
    }

    &__title {
      font-size: 20px;
      line-height: 1.4;
      font-weight: 600;
      color: $fontPrimary;
      margin-bottom: 12px;

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

    &__desc {
      @include smallDefault;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: $techGrey;
    }

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

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

    &__buttonText {
      @include baseCTA;
      color: $redPrimary;
    }

    &__buttonIcon {
      width: 32px;
      height: 16px;

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

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

      .card__image {
        transform: scale(1.05);
      }
    }
  }
</style>