<script>
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';

export default {
  components: {
    timeAgoTooltip,
  },
  props: {
    updatedAt: {
      type: String,
      required: false,
      default: '',
    },
    updatedByName: {
      type: String,
      required: false,
      default: '',
    },
    updatedByPath: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    hasUpdatedBy() {
      return this.updatedByName && this.updatedByPath;
    },
  },
};
</script>

<template>
  <small
    class="edited-text"
  >
    Edited
    <time-ago-tooltip
      v-if="updatedAt"
      :time="updatedAt"
      tooltip-placement="bottom"
    />
    <span
      v-if="hasUpdatedBy"
    >
      by
      <a
        :href="updatedByPath"
        class="author-link"
      >
        <span>{{ updatedByName }}</span>
      </a>
    </span>
  </small>
</template>
