<template>
  <div v-if="link" class="flex flex-col justify-between d-secondary-text mt-8 mb-4 px-4 sm:px-6 sm:flex-row">
    <a :href="link" target="_blank" rel="noopener" class="flex items-center mb-2 text-sm sm:mb-0 hover:underline">
      <IconEdit class="w-3 h-3 mr-1" />
      <span>
        {{ $t('article.github') }}
      </span>
    </a>

    <span v-if="page.mtime" class="flex items-center text-sm">
      {{ $t('article.updatedAt') }} {{ $d(Date.parse(page.mtime), 'long') }}
    </span>
  </div>
</template>

<script>

import { defineComponent } from '@nuxtjs/composition-api'
import { useGitHub } from '../../../composables'

export default defineComponent({
  props: {
    page: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const { getPageLink } = useGitHub()

    const link = getPageLink(props.page)

    return {
      link
    }
  }
})
</script>
