<template>
  <div class="d-flex">
    <small class="my-4 font-weight-light mr-4 txt--text">
      <v-icon size="12" color="teal" class="icon-checkmark mr-2" v-if="showIcon"></v-icon>
      {{ timestamp }}</small
    >
  </div>
</template>

<script>
export default {
  props: {
    showIcon: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      timestamp: '',
    }
  },
  mounted() {
    setInterval(this.getNow, 1000)
  },

  methods: {
    getNow() {
      const months = [
          this.$t('general.date.january'),
          this.$t('general.date.february'), 
          this.$t('general.date.march'), 
          this.$t('general.date.april'), 
          this.$t('general.date.may'), 
          this.$t('general.date.june'), 
          this.$t('general.date.july'), 
          this.$t('general.date.august'), 
          this.$t('general.date.september'), 
          this.$t('general.date.october'), 
          this.$t('general.date.november'), 
          this.$t('general.date.december'), 
      ]
      const now = new Date()
      const day = now.getDate()
      const month = now.getMonth()
      const year = now.getFullYear()

      let h = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
      let m = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()

      const date = `${day} ${months[month]} ${year}`
      const time = `${h}:${m}`
      this.timestamp = `${date}`
    },
  },
}

</script>
