<template>
    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
      <div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">

        <!-- Tombol close -->
        <button @click="$emit('close')" class="absolute top-3 right-3 text-gray-600 hover:text-black">
          ✕
        </button>

        <!-- Judul -->
        <h2 class="text-xl font-bold text-center text-D mb-4">Edit Kategori</h2>

        <!-- Input Nama Kategori -->
        <div class="mb-4">
          <label for="editKategori" class="block text-sm font-medium text-D mb-1">Nama Kategori</label>
          <input
            v-model="editNamaKategori"
            type="text"
            id="editKategori"
            placeholder="Masukkan nama kategori"
            class="w-full p-2 border rounded-md bg-Focus outline-none"
          />
        </div>

        <!-- Tombol Aksi -->
        <div class="flex justify-end gap-3">
          <button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
            Batal
          </button>
          <button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
            Update
          </button>
        </div>
      </div>
    </div>
  </template>

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

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

  const editNamaKategori = ref("");

  watch(
    () => props.kategori,
    (newVal) => {
      if (newVal) {
        editNamaKategori.value = newVal.nama;
      }
    },
    { immediate: true }
  );

  const updateKategori = () => {
    if (editNamaKategori.value.trim() === "") {
      alert("Nama kategori tidak boleh kosong!");
      return;
    }

    // Emit hasil update ke parent
    emit("update", { ...props.kategori, nama: editNamaKategori.value });
  };
  </script>
