<script setup lang="ts">
import { RouterLink } from 'vue-router'

interface Props {
  icon: unknown | object
  href: string
}

defineProps<Props>()
</script>

<template>
  <RouterLink class="navigation__link" :to="href">
    <component class="navigation__link-icon" :is="icon" />
    <span class="navigation__link-text">
      <slot></slot>
    </span>
  </RouterLink>
</template>

<style lang="scss">
.navigation {
  &__link {
    flex: var(--navigation-link-flex);
    display: flex;
    flex-flow: row nowrap;
    justify-content: var(--navigation-link-justify);
    align-items: center;

    height: var(--navigation-link-height);

    padding: var(--navigation-link-padding);

    color: var(--color-router-link);
    box-shadow: none;

    &:hover {
      box-shadow: var(--navigation-link-box-shadow);

      svg {
        fill: var(--color-router-link-hover);
      }
    }

    &:hover &-text {
      color: var(--color-router-link-hover);
    }

    &:last-child {
      margin: var(--navigation-link-last-child-margin);
    }

    > * {
      flex: 1 0 0;
    }

    &.router-link-exact-active {
      color: var(--color-router-link-hover);
      background-color: var(--color-router-link);

      &:hover {
        color: var(--color-router-link-hover);
      }

      svg {
        fill: var(--color-router-link-hover);
      }
    }
  }

  &__link-icon {
    width: var(--navigation-link-icon-size);
    min-width: var(--navigation-link-icon-size);
    max-width: var(--navigation-link-icon-size);
    margin: 0 var(--navigation-link-icon-spacing);
    fill: var(--color-router-link);
  }

  &__link-text {
    display: var(--navigation-link-display);
    font-size: var(--navigation-link-text-font-size);
    margin: 0 0 0 1rem;
    white-space: nowrap;
  }
}
</style>
