<template>
  <div>
    <!-- Card Produk -->
    <div
      class="border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer"
      @click="showDetail = true"
    >
      <span class="text-gray-700 font-medium text-center px-2">
        {{ product.nama }}
      </span>
    </div>

    <!-- Overlay Detail -->
    <div
      v-if="showDetail"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div
        class="bg-white rounded-lg shadow-lg w-[90%] max-w-md p-6 relative"
      >
        <!-- Tombol Close -->
        <button
          class="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
          @click="showDetail = false"
        >
          ✕
        </button>

        <!-- Judul -->
        <h2 class="text-xl font-semibold text-D mb-4 text-center">
          Detail Produk
        </h2>

        <!-- Data Produk -->
        <div class="space-y-2 text-gray-700">
          <p><span class="font-semibold">Nama:</span> {{ product.nama }}</p>
          <p><span class="font-semibold">Kategori:</span> {{ product.kategori }}</p>
          <p><span class="font-semibold">Berat:</span> {{ product.berat }} gram</p>
          <p><span class="font-semibold">Kadar:</span> {{ product.kadar }}%</p>
          <p><span class="font-semibold">Harga/gram:</span> Rp {{ formatHarga(product.harga_per_gram) }}</p>
          <p><span class="font-semibold">Harga Jual:</span> Rp {{ formatHarga(product.harga_jual) }}</p>
          <p><span class="font-semibold">Stok:</span> {{ product.items_count }} pcs</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

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

const showDetail = ref(false);

// Format rupiah
function formatHarga(value) {
  return new Intl.NumberFormat("id-ID").format(value);
}
</script>
