<script lang="ts">
  import { getLocaleUrl, getRouteByPostType, locale, defaultLocale } from '$lib/translations';
  import type { IPost } from '$type/post';

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

  let createText = '';

  if (data?.date) {
    const createDate = new Date(data.date);
    const createMonthName = createDate.toLocaleString($locale, { month: 'long' });

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

<div class="blog-card {className}">
  <a
    aria-label="Read more {data?.title?.rendered}"
    class="blog-card__link"
    href={getLocaleUrl(`/${getRouteByPostType(data?.type ?? '')}/${data?.slug ?? 'slug'}`)}
  />
  <div class="blog-card__header">
    {#if data?.imageData?.large}
      <img src={data?.imageData?.large} alt="" class="blog-card__image" loading="lazy" />
    {/if}
    <p class="blog-card__date">{createText}</p>
  </div>
  <div class="blog-card__body">
    <p class="blog-card__title">{data?.title?.rendered ?? ''}</p>
  </div>
</div>

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

  .blog-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

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

    &__header {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 314 / 216;
      background: $blog;
      border-radius: 20px;
      margin-bottom: 20px;

      @media (max-width: 720px) {
        margin-bottom: 16px;
      }
    }

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

    &__body {
      padding: 0 8px 0px 8px;
      display: flex;
      flex-direction: column;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }

    &__date {
      position: absolute;
      bottom: 16px;
      left: 16px;
      font-size: 14px;
      line-height: 20px;
      color: #f9fbfc;
      font-weight: 400;
      z-index: 2;
    }

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