<template>
  <span
      class="link"
      :class="{ 'link--clickable': isClickable }"
      @click="handleClick"
  >
    <slot></slot>
  </span>
</template>

<script setup lang="ts">
interface Props {
  routePath?: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  click: [];
}>();

const router = useRouter();

const isClickable = computed(() => !!props.routePath);

const handleClick = () => {
  if (props.routePath) {
    if (import.meta.client) {
      router.push(props.routePath);
    }
  } else {
    emit('click');
  }
};
</script>

<style lang="scss" scoped>
.link {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: $primary;
  font-size: 14px;
  font-weight: 400;

  &--clickable {
    cursor: pointer;
  }

  @include hover {
    color: $secondary;
  }
}
</style>