<template>
  <div class="flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
    <!-- Photo frame with decoration -->
    <div class="relative">
      <div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30"></div>
      <img
        v-if="childPhoto"
        :src="childPhoto"
        alt="Foto Anak"
        class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10"
      />
      <div v-else class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10">
        <span class="text-4xl">👶</span>
      </div>
    </div>

    <div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100">
      <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
        Halo, Aku {{ childName }}
      </h2>
      <div class="space-y-3 text-gray-700">
        <p class="text-xl font-semibold">Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉</p>
        <p class="text-gray-600">Putra/Putri dari</p>
        <p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
          {{ parentsName }}
        </p>
      </div>
      <p class="mt-6 text-lg text-gray-600 italic">
        Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
      </p>
    </div>
  </div>
</template>

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