<template>
  <div>
    <nuxt-link
      v-for="post in posts"
      :key="post.id"
      :to="`/post/${post.id}`"
      class="border-b pb-5 mt-5"
    >
      <h2 class="text-4xl">{{ post.title }}</h2>
      <VueMarkdown id="content">{{ post.content }}</VueMarkdown>
    </nuxt-link>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import gql from 'graphql-tag'

const posts = gql`
  query posts($first: Int!, $skip: Int!) {
    posts(orderBy: createdAt_ASC, first: $first, skip: $skip) {
      id
      slug
      title
      content
    }
  }
`

export default {
  name: 'BlogPostsCards',
  components: {
    VueMarkdown
  },
  props: {
    initialPosts: {
      type: Number,
      default: 3
    }
  },
  data: () => ({
    loading: 0
  }),
  apollo: {
    posts: {
      query: posts,
      variables: {
        first: 3,
        skip: 0,
        orderBy: 'updatedAt_ASC'
      }
    }
  }
}
</script>