<template>
  <div class="blog">
    <ui-title>
      <h1>{{ t('blog.title') }}</h1>
      <p>{{ t('blog.text') }}</p>
    </ui-title>
    <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 {
  &__main {
    background-color: $main;
    padding-block: 70px;
    border-top: 1px solid $border;

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