<template>
  <div class="post">
    <header class="post-meta">
      <h1 class="post-title">{{ title }}</h1>
      <div class="post-date">{{ formatDate($frontmatter.date) }} / {{ readingTime }} min read</div>
    </header>
    <Content class="post-content"></Content>
    <BackToTop />
  </div>
</template>

<script>
import BackToTop from '@theme/components/BackToTop';
import dayjs from 'dayjs';
import { sample } from 'lodash-es';

export default {
  name: 'Post',
  components: {
    BackToTop,
  },
  computed: {
    image() {
      const images = this.$frontmatter.cover;
      return (Array.isArray(images) ? sample(images) : images) || '';
    },
    title() {
      return this.$frontmatter.title || this.$page.title || '';
    },
    readingTime() {
      return Math.ceil(this.$page.readingTime.minutes);
    },
  },
  methods: {
    formatDate(val, format = 'MMM D, YYYY') {
      return dayjs(val).format(format);
    },
  },
};
</script>

<style lang="stylus">
@import '~@theme/styles/_content';
</style>

<style lang="stylus" scoped>
@import '~@theme/styles/_mixins.styl';

.post {
  position: relative;
  padding-bottom: space(3);

  .post-meta {
    margin: space(5) 0 space(8);
    border-bottom: 1px solid var(--separator-color);
  }

  .post-title {
    font('xxxl');
    font-weight: 500;
    margin-bottom: space();
    color: var(--fg-color-1);
  }

  .post-date {
    font('sm');
    margin-bottom: space();
    color: var(--fg-color-3);
  }

}
</style>
