<template>
  <Container class="articles">
    <div class="headline">
      <h2 class="title">Articles</h2>
      <BlogButton class="button-desktop" size="big" />
    </div>
    <div class="items">
      <BlogCard v-for="(post, index) in posts" :key="index" :article="post" />
    </div>
    <BlogButton class="button-mobile" />
  </Container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Container from '@/components/ui/Container.vue';
import { featured } from '@/components/pages/index/content';
import { useBlogStore } from '@/store/blog';
import BlogCard from '@/components/blocks/BlogCard.vue';
import BlogButton from '@/components/pages/index/Articles/BlogButton.vue';

export default defineComponent({
  components: { BlogButton, BlogCard, Container },

  async setup() {
    const blogStore = useBlogStore();
    await blogStore.getPostsPreview({ limit: 2 });

    return { posts: blogStore.postsPreview };
  },

  data: () => ({
    items: featured,
  }),
});
</script>

<style lang="scss">
.articles {
  margin-bottom: 160px;

  //@include media(tabletDraft) {
  //  margin-bottom: 110px;
  //}

  //@include media(mobileDraft) {
  //  margin-bottom: 96px;
  //}
}

.headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;

  //@include media(mobileDraft) {
  //  margin-bottom: 32px;
  //}
}

.title {
  color: #000000;

  font-weight: 700;
  font-size: 48px;
  line-height: 132%;

  //@include media(tabletDraft) {
  //  font-size: 36px;
  //  line-height: 136%;
  //}
}

.items {
  display: flex;
  //gap: 60px;
  justify-content: space-between;

  //@include media(desktop) {
  //  gap: 32px;
  //}

  //@include media(tabletDraft) {
  //  flex-direction: column;
  //  gap: 48px;
  //  margin-bottom: 48px;
  //}
}

.button-desktop {
  //@include media(tabletDraft) {
  //  display: none !important;
  //}
}

.button-mobile {
  display: none !important;

  //@include media(tabletDraft) {
  //  display: flex !important;
  //}
}
</style>
