<script setup>
  defineProps({
    logoSrc: {
      type: String,
      required: true
    },
    logoAlt: {
      type: String,
      required: true
    },
    imgAgendaSrc: {
      type: String,
      required: true
    }
  })
</script>

<template>
  <div class="header_navigation">

    <div class="height_10"></div>

    <nav class="header_navigation_topbar">
      <div class="header_nav_item">Professionnels</div>
      <div class="header_nav_item header_nav_lang">
        <div class="header_nav_lang_item">FR</div>
        <div class="header_nav_lang_item">/</div>
        <div class="header_nav_lang_item">EN</div>
      </div>
    </nav>

    <div class="height_20"></div>

    <div class="header_navigation_main">
      <div class="header_nav_logo">
        <NuxtImg
          :src="logoSrc"
          :alt="logoAlt"
          class="logo-img"
        />
      </div>
      <nav class="header_nav_cont">

        <div class="header_nav">
          <div class="header_nav_item brandontext_bold">
            <NuxtLink to="/">L'Orchestre</NuxtLink>
          </div>
          <div class="header_nav_item">
            <NuxtLink to="/agenda">Concerts</NuxtLink>
          </div>
          <div class="header_nav_item brandontext_bold">
            <NuxtLink to="/agenda">Éducation et médiation</NuxtLink>
          </div>
          <div class="header_nav_item">
            <NuxtLink to="/agenda">Mécénat</NuxtLink>
          </div>
          <div class="header_nav_item">
            <NuxtLink to="/agenda">
              <div class="nav_icone">
                <div class="nav_icone_img"><img :src="imgAgendaSrc" alt="icone agenda"></div>
                <div>Agenda</div>
              </div>
            </NuxtLink>
          </div>
        </div>

      </nav>
    </div>

    <div class="height_25"></div>

  </div>
</template>

<style>

</style>