<script setup>
import { ref, provide } from "vue";
import NavDesktop from "./NavDesktop.vue";
import NavMobile from "./NavMobile.vue";
import logo from "../../images/logo.png";

// Shared state
const isOpen = ref(false);
const isMobileMenuOpen = ref(false);

// Menu items configuration
const items = [
  { label: "Manajemen Produk", subItems: [
    { label: "Brankas", route: "/brankas" },
    { label: "Nampan", route: "/nampan" },
    { label: "Produk", route: "/produk" },
    { label: "Kategori", route: "/kategori" },
    { label: "Sales", route: "/sales" },
  ] },
  { label: "Kasir", route: "/kasir" },
  { label: "Laporan", route: "/laporan" },
  { label: "Akun", route: "/akun" },
];

// Shared methods
const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
};

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
  isOpen.value = false;
};

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false;
  isOpen.value = false;
};

const logout = () => {
  console.log("Logout clicked");
  closeMobileMenu();
};

// Provide shared data to child components
provide('navigationData', {
  logo,
  items,
  isOpen,
  isMobileMenuOpen,
  toggleDropdown,
  toggleMobileMenu,
  closeMobileMenu,
  logout
});
</script>

<template>
  <div class="relative">
    <!-- Desktop Navigation -->
    <NavDesktop />
    
    <!-- Mobile Navigation -->
    <NavMobile />
    
    <!-- Click Outside Handler for Desktop Dropdown -->
    <div 
      v-if="isOpen && !isMobileMenuOpen"
      @click="isOpen = false"
      class="fixed inset-0 z-10"
    ></div>
  </div>
</template>