<template>
  <v-card max-width="300" class="mx-auto">
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="subtitle-2">{{title}}</v-list-item-title>
        <v-list-item-subtitle>{{author}}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>

    <v-img src="https://cdn.vuetifyjs.com/images/cards/mountain.jpg" height="180"></v-img>

    <v-card-text v-html="body" v-if="!noText"/>

    <v-card-actions>
        <v-btn nuxt :to="{ name: 'blog-slug', params: { slug, id } }">Read more</v-btn>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>icon-share</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    author: {
      type: String,
    },
    body: {
      type: String,
      required: true
    },
    image: {
      required: false
    },
    slug: {
      type: String,
      required: true
    },
    noText: {
        type: Boolean,
    }
  }
}
</script>