<script lang="ts" setup>
  import {ref} from 'vue'
  import {Menu, X} from 'lucide-vue-next'
  import type {Profile} from '@/domain/models/Profile'

  defineProps<{
    sections: Array,
    profile: Profile
  }>()

  const emit = defineEmits(['navigate'])

  const isMobileMenuOpen = ref(false)

  function toggleMobileMenu() {
    isMobileMenuOpen.value = !isMobileMenuOpen.value
  }

  function handleMobileNavigate(sectionId) {
    emit('navigate', sectionId)
    isMobileMenuOpen.value = false
  }
</script>

<template>
  <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
            <span class="text-white font-bold text-sm">{{ profile.name.charAt(0).toUpperCase() }}</span>
          </div>
          <div class="flex flex-col">
            <span class="font-bold text-gray-900 dark:text-white">{{ profile.name }}</span>
            <span class="text-gray-500 dark:text-gray-300 text-sm">{{ profile.title }}</span>
          </div>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center space-x-8">
          <template v-for="section in sections">
            <button
                v-if="section.enabled === true"
                :key="section.id"
                class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors font-medium"
                @click="$emit('navigate', section.id)"
            >
              {{ section.label }}
            </button>
          </template>
        </div>

        <!-- Mobile Menu Button -->
        <button
          @click="toggleMobileMenu"
          class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
        >
          <Menu v-if="!isMobileMenuOpen" class="w-6 h-6" />
          <X v-else class="w-6 h-6" />
        </button>
      </div>

      <!-- Mobile Navigation -->
      <div v-if="isMobileMenuOpen" class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
        <div class="flex flex-col space-y-2">
          <template v-for="section in sections">
            <button
                v-if="section.enabled === true"
                :key="section.id"
                class="text-left px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors"
                @click="handleMobileNavigate(section.id)"
            >
              {{ section.label }}
            </button>
          </template>
        </div>
      </div>
    </div>
  </nav>
</template>

