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

const isOpen = ref(false);

const items = [
  { label: "Kasir", route: "/kasir" },
  { label: "Laporan", route: "/laporan" },
  { label: "Akun", route: "/akun" },
];

const subItems = [
  { label: "Brankas", route: "/brankas" },
  { label: "Nampan", route: "/nampan" },
  { label: "Produk", route: "/produk" },
  { label: "Sales", route: "/sales" },
];

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
};
</script>

<template>
  <div class="h-25 shadow-lg shadow-D rounded-b-md">
    <div class="bg-D h-5 rounded-b-md shadow-lg">
      <div class="h-15"></div>
      <div class="w-full px-50 flex justify-between items-center h-5 relative">
        
        <!-- Dropdown khusus "Manajemen Produk" -->
        <div class="relative">
          <button
            @click="toggleDropdown"
            class="text-center text-lg text-D hover:underline cursor-pointer"
          >
            Manajemen Produk
          </button>
          
          <!-- isi dropdown -->
          <div
            v-if="isOpen"
            class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
          >
            <ul>
              <li
                v-for="(sub, index) in subItems"
                :key="index"
                class="px-4 py-2 hover:bg-A cursor-pointer"
              >
                <router-link :to="sub.route" class="block w-full h-full">
                  {{ sub.label }}
                </router-link>
              </li>
            </ul>
          </div>
        </div>

        <!-- menu lain -->
        <router-link
          v-for="item in items"
          :key="item.label"
          :to="item.route"
          class="text-center text-lg text-D hover:underline cursor-pointer"
        >
          {{ item.label }}
        </router-link>
      </div>
    </div>
  </div>
</template>
