<template>
  <div class="flex flex-col items-center text-center min-h-screen bg-yellow-200 py-12 px-6">
    <img
      v-if="childPhoto"
      :src="childPhoto"
      alt="Foto Anak"
      class="w-40 h-40 rounded-full shadow-lg mb-6 object-cover border-4 border-yellow-500"
    />

    <h2 class="text-3xl font-bold text-orange-700 mb-2">{{ childName }}</h2>
    <p class="text-lg text-gray-700 mb-4">Berusia {{ age }} tahun 🎂</p>
    <p class="text-md text-gray-600 mb-6">Putra/Putri dari {{ parentsName }}</p>

    <p class="max-w-md text-gray-700 leading-relaxed">
      Dengan penuh sukacita, kami mengundang teman-teman dan keluarga untuk hadir dalam acara ulang tahun kami yang
      ke-{{ age }}!
    </p>
  </div>
</template>

<script setup>
defineProps({
  age: [String, Number],
  childName: String,
  parentsName: String,
  childPhoto: String
})
</script>
