<template>
  <section class="w-full max-w-6xl mx-auto text-center px-4">
    <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
      Galeri Foto
    </h1>

    <div v-if="images && images.length" class="grid grid-cols-2 md:grid-cols-3 gap-4">
      <img
        v-for="(img, index) in images"
        :key="index"
        :src="img"
        alt="gallery"
        class="rounded-xl shadow-lg object-cover h-48 w-full hover:scale-105 transition-transform duration-300"
      />
    </div>

    <div v-else class="text-orange-800 bg-yellow-100 py-8 rounded-2xl shadow-inner">
      <p class="text-lg font-semibold">Belum ada foto untuk ditampilkan</p>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  images: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
img {
  border: 3px solid rgba(255, 255, 255, 0.6);
}
</style>
