<template>
  <div class="relative">
    <!-- Card Produk -->
    <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>

    <!-- Notifikasi Stok Menipis (di luar card) -->
    <div
      v-if="isStockLow"
      class="absolute -top-2 -right-2 group z-20"
    >
      <!-- Bulatan Merah -->
      <div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
        <span class="text-white text-xs font-bold">!</span>
      </div>

      <!-- Tooltip -->
      <div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
        Stok menipis: {{ product.items_count }} pcs
        <!-- Arrow untuk tooltip -->
        <div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});

// Computed untuk mengecek apakah stok menipis (kurang dari 5)
const isStockLow = computed(() => {
  return props.product.items_count < 5;
});
</script>
