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

const {
  logo,
  items,
  isOpen,
  toggleDropdown,
  logout
} = inject('navigationData');
</script>

<template>
  <!-- Desktop Navbar -->
  <div class="hidden md:block shadow-lg shadow-D rounded-b-md">
    <div class="bg-D h-5 rounded-b-md shadow-lg"></div>
    <div class="relative rounded-b-md shadow-lg">
      <!-- Logo Row -->
      <div class="flex justify-center items-center">
        <img :src="logo" alt="Logo" class="h-12 w-auto" />
      </div>

      <!-- Menu Row -->
      <div class="px-8 pb-4">
        <div class="flex justify-around items-center gap-4">
          <template v-for="(item, index) in items" :key="index">

            <div v-if="item.subItems" class="relative flex-1">
              <button @click="toggleDropdown(index)"
                class="w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2">
                {{ item.label }}
                <svg :class="{ 'rotate-180': openDropdownIndex === index }"
                  class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              <div v-if="openDropdownIndex === index"
                class="absolute left-0 mt-2 w-full bg-white border rounded-md shadow-lg z-50">
                <ul>
                  <li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
                    class="hover:bg-A transition-colors duration-200">
                    <router-link :to="sub.route" class="block w-full h-full px-4 py-2 text-D">
                      {{ sub.label }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>

            <router-link v-else :to="item.route"
              class="flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2">
              {{ item.label }}
            </router-link>
          </template>
        </div>
      </div>

      <div class="absolute top-4 right-8">
        <button @click="logout"
          class="text-center font-bold text-lg text-red-400 hover:underline hover:text-red-600 cursor-pointer transition-colors duration-200">
          Logout
        </button>
      </div>
    </div>
  </div>
</template>