<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    <div
      v-for="item in filteredItems"
      :key="item.id"
      class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition"
    >
      <!-- Gambar -->
      <div class="flex items-center gap-3">
        <img
          :src="item.image"
          alt="Product Image"
          class="w-12 h-12 object-contain"
        />
        <!-- Info produk -->
        <div>
          <p class="font-semibold">{{ item.produk.nama }}</p>
          <p class="text-sm text-gray-500">{{ item.produk.id }}</p>
        </div>
      </div>

      <!-- Berat -->
      <span class="font-medium">{{ item.berat }}g</span>
    </div>
  </div>
</template>

<script setup>


import { ref, computed, onMounted } from "vue";
import axios from "axios";

const props = defineProps({
  search: {
    type: String,
    default: "",
  },
});

const items = ref([]);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
  try {
    const res = await axios.get("/api/item"); // ganti sesuai URL backend
    items.value = res.data; // pastikan backend return array of items
    console.log(res.data);
    
  } catch (err) {
    error.value = err.message || "Gagal mengambil data";
  } finally {
    loading.value = false;
  }
});

const filteredItems = computed(() => {
  if (!props.search) return items.value;
  return items.value.filter((item) =>
    item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase())
  );
});
</script>
