<template>
  <section class="w-full max-w-6xl mx-auto">
    <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
      <!-- Bagian kiri: Teks -->
      <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>

        <!-- Gambar Minion -->
        <div class="flex justify-center lg:justify-start mb-6">
          <img
            :src="getFullPhotoUrl(minionImage)"
            alt="Minion"
            class="w-85 h-auto object-contain drop-shadow-lg hover:scale-110 transition-transform duration-300"
          />
        </div>

        <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
          {{ parentNames }}
        </h4>
      </div>

      <!-- Bagian kanan: Foto Anak -->
      <div class="flex-1">
        <div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
          <img
            :src="getFullPhotoUrl(childPhoto)"
            :alt="childName"
            class="w-full h-80 object-cover rounded-2xl shadow-lg"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const { age, childName, childOrder, parentNames, childPhoto } = defineProps({
  age: [Number, String],
  childName: String,
  childOrder: [Number, String],
  parentNames: String,
  childPhoto: [String, Array]
})

// 🟡 Lokasi file Minion kamu
const minionImage = '/minion2.png'

// Fungsi untuk mengatur URL gambar
const getFullPhotoUrl = (photo) => {
  if (!photo) return '/assets/img/child-placeholder.jpg'
  if (photo.startsWith('http')) return photo
  if (photo.startsWith('/')) return photo // untuk file lokal di /public/
  return `http://localhost:8000/storage/${photo}`
}
</script>


