<template>
  <div
    class="relative z-0 border  border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
    @click="$emit('click', product.id)"
  >
    <!-- Foto Produk -->
    <img
      v-if="product.foto && product.foto.length > 0"
      :src="product.foto[0].url"
      :alt="product.nama"
      class="w-full h-full object-cover"
    />
    <span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>

    <!-- Nama Produk di bawah -->
    <div
      class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
    >
      {{ product.nama }}
    </div>
  </div>
</template>

<script setup>
defineProps({
  product: {
    type: Object,
    required: true,
  },
});
</script>
