<template>
  <div class="flex justify-between">
    <NuxtLink
      v-if="prev"
      :to="{ name: 'blog-slug', params: { slug: prev.slug } }"
      class="font-bold text-primary hover:underline"
    >
      {{ prev.title }}
    </NuxtLink>
    <span v-else>&nbsp;</span>
    <NuxtLink
      v-if="next"
      :to="{ name: 'blog-slug', params: { slug: next.slug } }"
      class="font-bold hover:underline"
    >
      {{ next.title }}
    </NuxtLink>
    <span v-else>&nbsp;</span>
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  setup({ prev = null, next = null }) {
    console.log(prev)
    console.log(next)
    return {
      prev,
      next,
    }
  },
})
// export default {
//   props: {
//     prev: {
//       type: Object,
//       default: () => null,
//     },
//     next: {
//       type: Object,
//       default: () => null,
//     },
//   },
// }
</script>
