<template>
  <div class="min-h-screen bg-yellow-100 py-10 px-4">
    <h2 class="text-3xl font-bold text-orange-700 text-center mb-8">📸 Galeri Foto</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
      <div
        v-for="(img, index) in images"
        :key="index"
        class="relative group overflow-hidden rounded-2xl shadow-md"
      >
        <img :src="img" alt="Foto" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110" />
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  images: {
    type: Array,
    default: () => []
  }
})
</script>