<template>
  <section class="text-center space-y-6 p-6">
    <h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>

    <div class="bg-white/70 rounded-2xl shadow-md p-6 max-w-lg mx-auto space-y-3">
      <p><strong>Hari & Tanggal:</strong> {{ 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="text-blue-600 underline"
        >Lihat di Google Maps</a
      >
    </div>

    <div v-if="hitung_mundur" class="mt-8">
      <h3 class="font-semibold text-gray-700 mb-2">Hitung Mundur Menuju Acara:</h3>
      <CountdownTimer :targetDate="hitung_mundur" />
    </div>
  </section>
</template>

<script setup>
import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
defineProps({
  hari_tanggal_acara: String,
  waktu: String,
  alamat: String,
  link_gmaps: String,
  hitung_mundur: String
})
</script>
