<template>
  <section class="w-full max-w-6xl mx-auto">
    <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
      <div class="flex-1 text-center lg:text-left">
        <h1 class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
          Ulang Tahun Ke -{{ age }}
        </h1>
        <h2 class="text-orange-800 text-3xl md:text-5xl font-bold mb-6">
          {{ childName }}
        </h2>
        <h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
          Anak Ke -{{ childOrder }}
        </h3>
        <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
          {{ parentNames }}
        </h4>
      </div>
      <div class="flex-1">
        <div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
          <img :src="childPhoto || '/assets/img/child-placeholder.jpg'" 
               :alt="childName"
               class="w-full h-80 object-cover rounded-2xl shadow-lg">
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  age: Number,
  childName: String,
  childOrder: Number,
  parentNames: String,
  childPhoto: String
})
</script>
