import { computed, onMounted, onBeforeUnmount, shallowRef } from 'vue'

export const useTime = () => {
  const date = shallowRef(new Date())
  const timer = shallowRef()

  const currentTime = computed(() => {
    return `${date.value.getHours().toString().padStart(2, '0')}:${date.value.getMinutes().toString().padStart(2, '0')}`
  })
  const getDate = () => {
    timer.value = setInterval(() => {
      date.value = new Date()
    }, 60000)
  }

  onMounted(getDate)
  onBeforeUnmount(() => clearInterval(timer.value))

  return {
    currentTime
  }
}