<template>
  <div class="card">
    <p class="card__title">{{ post.title }}</p>
    <nuxt-link-locale :to="`/blog/${post.slug}`" class="card__button">{{ t('buttons.readMore') }}</nuxt-link-locale>
  </div>
</template>

<script setup lang="ts">
import type {IPost} from '@types';

const props = defineProps<{
  post: { node: IPost }[];
}>();

const {t} = useI18n();
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;

  &__title {
    color: #1a1a1a;
    font-family: "Playfair Display", sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }

  &__button {
    width: fit-content;
    position: relative;
    color: #1a1a1a;
    transition: 0.2s;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.5px;

    &::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      height: 2px;
      width: 0;
      transition: all .3s ease;
      background-color: #1f2937;
    }

    &.active::after {
      width: 100%;
    }

    @include hover {
      &::after {
        width: 100%;
      }
    }
  }
}
</style>