<template>
  <component :is="tag" class="arrow-link" :to="path">
    <span>
      <slot></slot>
    </span>
    <img v-lazy="arrowIcon" class="arrow-icon" width="16" height="10" />
  </component>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-long-orange.svg?url';

export default defineComponent({
  props: {
    path: {
      type: String,
      default: '',
    },
  },

  data: () => ({
    arrowIcon,
  }),

  computed: {
    tag(): string {
      return this.path ? 'router-link' : 'div';
    },
  },
});
</script>

<style lang="scss" scoped>
.arrow-link {
  display: flex;
  align-items: center;

  color: #7d7f82;
  font-size: 14px;
  line-height: 100%;
  column-gap: 12px;

  cursor: pointer;

  transition: color 0.3s;

  &:hover {
    color: #ff5f21;

    .arrow-icon {
      filter: contrast(100%) grayscale(0%) opacity(100%);
    }
  }
}

.arrow-icon {
  filter: contrast(1000%) grayscale(100%) opacity(50%);

  transition: 0.3s color ease-out;
}
</style>
