<template>
  <div class="blog">
    <div class="blog__top">
      <div class="container">
        <div class="blog__top-wrapper">
          <h1>{{ t('blog.title') }}</h1>
          <p>{{ t('blog.text') }}</p>
        </div>
      </div>
    </div>
    <div class="blog__main">
      <div class="container">
        <div class="blog__main-wrapper">
          <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 {usePageTitle} from '@composables/utils';
import {usePosts} from "@composables/posts";
import {docsSlugs} from "@appConstants";

const {t} = useI18n();

const { setPageTitle } = usePageTitle();
const { posts } = usePosts();

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

setPageTitle(t('breadcrumbs.blog'));
</script>

<style lang="scss" scoped>
.blog {
  &__top {
    padding-block: 70px;
    background-color: #f8f8f8;

    &-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

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

      & p {
        max-width: 600px;
        text-align: center;
        color: #4b5563;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.5px;
      }
    }
  }

  &__main {
    background-color: $white;
    padding-block: 70px;
    border-top: 1px solid #f3f4f6;

    &-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
  }
}
</style>