<script setup>
import { navItems } from '../data/site'
import AppLogo from './AppLogo.vue'

defineProps({
  scrolled: { type: Boolean, default: false },
  activeNav: { type: String, default: 'home' },
})

const emit = defineEmits(['navigate'])
</script>

<template>
  <header class="header" :class="{ scrolled }">
    <div class="container header-inner">
      <a href="#" class="logo" @click.prevent="emit('navigate', 'home')">
        <AppLogo />
      </a>
      <nav class="nav">
        <a
          v-for="item in navItems"
          :key="item.id"
          href="#"
          class="nav-link"
          :class="{ active: activeNav === item.id }"
          @click.prevent="emit('navigate', item.id)"
        >
          {{ item.label }}
        </a>
      </nav>
    </div>
  </header>
</template>
