<template>
  <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
       falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
       ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
  <NuxtLink
    :class="{'layout-logo--glow': glow}"
    :to="generateLink('/')"
    active-class="layout-logo"
    exact-active-class="layout-logo"
    class="layout-logo"
    @click="onLogoClick"
  >
    <img
      class="layout-logo__image"
      src="/img/logo.svg"
      width="120"
      height="20"
      alt="gay.cool"
    >
  </NuxtLink>
</template>

<script setup lang="ts">
defineProps<{
  glow?: boolean
}>();
const emit = defineEmits<{
  (eventName: 'click'): void
}>();

const { generateLink } = useGenerateLink();

function onLogoClick() {
  emit('click');
}
</script>

<style lang="scss">
.layout-logo {
  position: relative;

  @include hover(opacity) {
    opacity: 0.9;
  }
}

.layout-logo__image {
  @include from-br(sm) {
    width: 144px;
    height: 24px;
  }
}
</style>
