<template>
  <span :title="humanFriendlyDate()">{{ diffForHumans() }}</span>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import localizedDate from "dayjs/plugin/localizedFormat";
dayjs.extend(relativeTime);
dayjs.extend(localizedDate);
class Props {
  date!: string;
}

export default class BaseDate extends Vue.with(Props) {
  diffForHumans() {
    return dayjs(this.date).fromNow();
  }
  humanFriendlyDate() {
    return dayjs(this.date).format("llll");
  }
}
</script>