<template>
    <div class="text-center p-6">
      <h2 class="text-3xl font-bold text-orange-700 mb-6">🎈 Acara Ulang Tahun 🎈</h2>
  
      <div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-lg p-6 inline-block text-gray-700">
        <p><strong>Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
        <p><strong>Waktu:</strong> {{ waktu }}</p>
        <p><strong>Alamat:</strong> {{ alamat }}</p>
        <a
          v-if="link_gmaps"
          :href="link_gmaps"
          target="_blank"
          class="inline-block mt-4 text-blue-600 hover:underline"
        >
          📍 Lihat di Google Maps
        </a>
      </div>
  
      <div v-if="countdownText" class="mt-8 text-xl font-semibold text-orange-700">
        ⏰ {{ countdownText }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watchEffect } from 'vue'
  
  const props = defineProps({
    hari_tanggal_acara: String,
    waktu: String,
    alamat: String,
    link_gmaps: String,
    hitung_mundur: String
  })
  
  const countdownText = ref('')
  
  // Format tanggal
  function formatDate(dateStr) {
    if (!dateStr) return '-'
    const date = new Date(dateStr)
    return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
  }
  
  // Countdown
  watchEffect(() => {
    if (!props.hitung_mundur) return
  
    const target = new Date(props.hitung_mundur)
    const now = new Date()
    const diff = target - now
  
    if (diff <= 0) {
      countdownText.value = 'Acara sedang berlangsung 🎉'
    } else {
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
      const minutes = Math.floor((diff / (1000 * 60)) % 60)
      countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
    }
  })
  </script>
  