<template>
  <router-link :to="{ path }" class="post-item">
    <h5 class="title">{{ title }}</h5>
    <div class="date">{{ date }}</div>
  </router-link>
</template>

<script>
import { ref, computed } from '@vue/composition-api';
import dayjs from 'dayjs';
export default {
  name: 'PostItem',
  props: {
    post: {
      type: Object,
      required: true,
    },
  },
  setup(props, ctx) {
    const { post } = props;
    const { frontmatter } = post;
    return {
      title: post.title,
      path: post.path,
      date: dayjs(frontmatter.date).format('dddd, MMMM DD'),
    };
  },
};
</script>

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

.post-item {
  display: block;
  position: relative;
  overflow: hidden;
  margin: space(2) 0;
  padding-left: space(2);

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font('xl');
  }

  .date {
    color: var(--fg-color-3);
    font('sm');
  }
}
</style>
