<template>
  <div class="flex items-center mb-8 text-gray-500">
    <fa :icon="['far', 'clock']" class="text-xl mr-2" />

    <div>
      <span>{{ readingTimeToStr }}</span>
      <span
        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
      >
        {{ `(${readingTime.words} mots)` }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    readingTime: {
      type: Object,
      required: true,
    },
  },
  computed: {
    readingTimeToStr() {
      const minutes = this.readingTime.minutes
      if (minutes > 1) {
        return (
          'Environ ' +
          Math.round(minutes) +
          ' minute' +
          (Math.round(minutes) > 1 ? 's' : '')
        )
      }

      return "Moins d'une minute"
    },
  },
}
</script>

<style lang="scss" scoped></style>