<script setup lang="ts">
/**
 * @file AppHeader.vue
 * @description The main header for the authenticated application dashboard.
 * Includes sidebar toggle, branding, search functionality, and user menu.
 */

defineProps<{
  /** Controls visibility of the search bar */
  showSearch?: boolean
}>()

const emit = defineEmits<{
  /** Emitted when the hamburger menu is clicked */
  toggleSidebar: []
}>()
</script>

<template>
  <header class="app-header transition-colors" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
    <!-- Branding & Toggle -->
    <div class="flex items-center gap-2">
      <NuxtLink to="/dashboard" style="font-weight: 800; color: var(--primary); font-size: 20px;">
        e-Learning
      </NuxtLink>
    </div>
    
    <!-- Right Actions -->
    <div class="flex items-center gap-3">
      <!-- Search Bar (Optional) -->
      <div v-if="showSearch !== false" class="relative hidden-mobile" style="width: 300px;">
        <input 
          type="text" 
          class="input-field" 
          :placeholder="$t('menu.searchCourses')" 
          style="padding-left: 36px;"
        >
        <span style="position: absolute; left: 12px; top: 10px; color: var(--text-secondary);">🔍</span>
      </div>
      
      <!-- Language Switcher (Left of Avatar) -->
      <LanguageSwitcher />
      
      <!-- User Profile Dropdown -->
      <UserMenu />
    </div>
  </header>
</template>
