<template>
  <nav
    class="border-t border-gray-200 flex items-center justify-between max-w-2xl mx-auto p-4 sm:px-6 lg:max-w-7xl"
  >
    <div class="-mt-px w-0 flex-1 flex">
      <NuxtLink
        v-if="prevPageToken"
        :to="{ name: 'index', query: { pageToken: prevPageToken } }"
        href="#"
        class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
      >
        Previous
      </NuxtLink>
    </div>
    <div class="-mt-px w-0 flex-1 flex justify-end">
      <NuxtLink
        v-if="nextPageToken"
        :to="{ name: 'index', query: { pageToken: nextPageToken } }"
        href="#"
        class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
      >
        Next
      </NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'SimplePagination',

  props: {
    nextPageToken: {
      type: String,
      default: () => {
        return ''
      },
    },
    prevPageToken: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
})
</script>
