<template>
  <div class="min-h-screen flex flex-col items-center justify-center text-center bg-orange-100 py-10 px-6">
    <h2 class="text-3xl font-bold text-orange-700 mb-4">📅 Detail Acara</h2>

    <div class="bg-white rounded-2xl shadow-md p-6 w-full max-w-md text-gray-700">
      <p class="mb-2"><strong>Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
      <p class="mb-2"><strong>Waktu:</strong> {{ waktu }}</p>
      <p class="mb-2"><strong>Alamat:</strong> {{ alamat }}</p>

      <a
        v-if="link_gmaps"
        :href="link_gmaps"
        target="_blank"
        class="inline-block mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
      >
        📍 Lihat di Google Maps
      </a>
    </div>
  </div>
</template>

<script setup>
defineProps({
  hari_tanggal_acara: String,
  waktu: String,
  alamat: String,
  link_gmaps: String
})

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const d = new Date(dateStr)
  return d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
}
</script>
