<template>
  <div class="text-center p-6 max-w-2xl mx-auto">
    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
      🎈 Acara Ulang Tahun 🎈
    </h2>

    <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300">
      <div class="space-y-4 text-gray-700 text-lg">
        <div class="flex items-center justify-center space-x-3">
          <span class="text-2xl">📅</span>
          <p><strong class="text-orange-500">Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
        </div>
        
        <div class="flex items-center justify-center space-x-3">
          <span class="text-2xl">⏰</span>
          <p><strong class="text-orange-500">Waktu:</strong> {{ waktu }}</p>
        </div>
        
        <div class="flex items-center justify-center space-x-3">
          <span class="text-2xl">📍</span>
          <p><strong class="text-orange-500">Alamat:</strong> {{ alamat }}</p>
        </div>
      </div>

      <a
        v-if="link_gmaps"
        :href="link_gmaps"
        target="_blank"
        class="inline-flex items-center space-x-2 mt-6 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105"
      >
        <span>📍</span>
        <span>Lihat di Google Maps</span>
      </a>
    </div>

    <div v-if="countdownText" class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto">
      <p class="text-xl font-bold">⏰ {{ countdownText }}</p>
    </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>