<template>
    <div class="flex flex-col items-center text-center p-6 space-y-4">
      <img
        v-if="childPhoto"
        :src="childPhoto"
        alt="Foto Anak"
        class="w-40 h-40 rounded-full object-cover border-4 border-yellow-400 shadow-md"
      />
      <h2 class="text-3xl font-bold text-orange-700 mt-4">Halo, Aku {{ childName }}</h2>
      <p class="text-gray-700">Usiaku kini {{ age }} tahun 🎉</p>
      <p class="text-gray-600">Putra/Putri dari</p>
      <p class="text-lg font-semibold text-gray-800">{{ parentsName }}</p>
      <p class="mt-6 text-gray-700">
        Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
      </p>
    </div>
  </template>
  
  <script setup>
  defineProps({
    childName: String,
    parentsName: String,
    age: [String, Number],
    childPhoto: String
  })
  </script>
  