<template>
    <div class="text-gray-800 font-mono text-lg bg-white/60 rounded-lg px-4 py-2 inline-block">
      {{ days }}h : {{ hours }}j : {{ minutes }}m : {{ seconds }}d
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  
  const props = defineProps({ targetDate: String })
  
  const days = ref(0)
  const hours = ref(0)
  const minutes = ref(0)
  const seconds = ref(0)
  
  let timer
  
  const update = () => {
    const now = new Date()
    const target = new Date(props.targetDate)
    const diff = target - now
  
    if (diff <= 0) return clearInterval(timer)
  
    days.value = Math.floor(diff / (1000 * 60 * 60 * 24))
    hours.value = Math.floor((diff / (1000 * 60 * 60)) % 24)
    minutes.value = Math.floor((diff / (1000 * 60)) % 60)
    seconds.value = Math.floor((diff / 1000) % 60)
  }
  
  onMounted(() => {
    update()
    timer = setInterval(update, 1000)
  })
  
  onUnmounted(() => clearInterval(timer))
  </script>
  