<template>
  <nav
    v-if="showSubmenuBar && subMenus.length > 0"
    class="w-full bg-gray-100 shadow-sm px-4 py-2"
  >
    <div class="flex items-center space-x-6">
      <span class="text-sm font-medium text-gray-600 mr-4">
        {{ activeMenu }}
      </span>
      <div class="flex space-x-4">
        <button
          v-for="sub in subMenus"
          :key="sub.key"
          class="submenu-btn"
          @click="onSubMenuClick(sub)"
        >
          {{ sub.label }}
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
interface SubMenu {
  key: string;
  label: string;
  to: string;
  componentName: string;
}

interface Props {
  showSubmenuBar: boolean;
  activeMenu: string;
  subMenus: SubMenu[];
}

interface Emits {
  (e: "submenu-click", sub: SubMenu): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

function onSubMenuClick(sub: SubMenu) {
  emit("submenu-click", sub);
}
</script>

<style scoped>
.submenu-btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.submenu-btn:hover {
  color: #2563eb;
  background-color: #eff6ff;
}
</style>
