<script setup lang="ts">
const props = defineProps({
  path: {
    type: String,
    required: true,
  },
  external: Boolean,
  name: {
    type: String,
    required: true,
  },
  icon: {
    type: String,
    default: '',
  },
  alt: {
    type: String,
    default: 'Link',
  },
  width: {
    type: Number,
    default: 32,
  },
  height: {
    type: Number,
    default: 32,
  },
})
</script>

<template>
  <NuxtLink
    class="flex flex-row items-center gap-2 select-none text-inherit no-underline"
    active-class="active"
    :to="!props.external ? props.path : undefined"
    :href="props.external ? props.path : undefined"
  >
    <img
      draggable="false"
      :src="props.icon"
      :alt="props.alt"
      :width="props.width"
      :height="props.height"
    />
    <span class="hidden lm:hidden lt:hidden sm:block">
      <strong>
        {{ props.name }}
      </strong>
    </span>
  </NuxtLink>
</template>

<style scoped lang="scss">
.active {
  @apply px-4;
  transform: translate(2px, 2px) rotate3d(1, 1, 1, 5deg) scale(1.25);
}
</style>
