<script lang="ts" setup>
interface Props {
  showHamburger?: boolean
}

withDefaults(defineProps<Props>(), {
  showHamburger: true,
})

const emit = defineEmits<{
  toggleSidebar: []
  openCommandPalette: []
}>()
</script>

<template>
  <header class="app-navbar">
    <!-- Mobile hamburger -->
    <VBtn
      v-if="showHamburger"
      icon
      variant="text"
      size="small"
      class="d-lg-none me-2"
      @click="emit('toggleSidebar')"
    >
      <VIcon icon="tabler-menu-2" size="22" />
    </VBtn>

    <!-- Search trigger -->
    <VBtn
      variant="text"
      size="small"
      color="default"
      class="text-medium-emphasis"
      @click="emit('openCommandPalette')"
    >
      <VIcon icon="tabler-search" size="18" start />
      <span class="d-none d-sm-inline">Search...</span>
      <VChip size="x-small" variant="outlined" class="ms-2 d-none d-sm-inline-flex">
        ⌘K
      </VChip>
    </VBtn>

    <VSpacer />

    <!-- Right side slot for layout-specific content -->
    <slot />
  </header>
</template>
