<template>
  <button
    class="menu-burger"
    :aria-label="ariaLabel"
    @click="$emit('triggerToggleMenu')"
  >
    <div v-if="isLogged" class="wrapper-name">
      <div class="item-with-sub">
        <span>{{ userName }}</span>
      </div>
      <span class="desktop">{{ $t('general.header.my_account') }}</span>
      <img
        src="@/assets/images/icon/arrow-down.svg"
        alt=""
        :class="['arrow-img', { 'arrow-up': !menuIsClosed }]"
      />
    </div>
  </button>
</template>

<script setup lang="ts">
defineProps({
  menuIsClosed: { type: Boolean, default: true },
  isLogged: { type: Boolean, default: false },
  userName: { type: String, default: null },
  ariaLabel: { type: String, default: null }
})
</script>

<style scoped lang="scss">
.menu-burger {
  display: block;
  background-color: transparent;
  border: none;
  font-size: toRem(2.5);
  padding: 0;
  color: var(--blue-dark);
}
.wrapper-name {
  display: flex;
  align-items: center;
  @include text(m-r-regular);
}
.arrow-img {
  margin-left: toRem(0.5);
}
.arrow-up {
  transform: rotate(180deg);
}
.item-with-sub {
  @include text(s-regular);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--blue);
  background-color: var(--blue-semi);
  height: toRem(3);
  width: toRem(3);
  border-radius: 50%;
  margin-right: toRem(0.5);
}
.desktop {
  display: flex;
}
@media (max-width: toRem(76.8)) {
  .desktop {
    display: none;
  }
}
</style>
