<template>
  <div class="blog">
    <div class="container">
      <div class="blog__wrapper">
        <h2 class="blog__title">{{ t('home.blog.title') }}</h2>
        <div class="blog__posts">
          <cards-post
              v-for="post in filteredPosts.slice(0, 3)"
              :key="post.node.id"
              :post="post.node"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const {t} = useI18n();

const filteredPosts = computed(() => {
  const excludedSlugs = Object.values(docsSlugs);
  return props.posts.filter(post => !excludedSlugs.includes(post.node.slug));
});
</script>

<style lang="scss" scoped>
.blog {
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  &__title {
    color: $primary_dark;
    font-family: "Playfair Display", sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }

  &__posts {
    display: flex;
    align-items: stretch;
    gap: 32px;
  }
}
</style>