<template>
  <span class="app-link">
    <a :href="href" :target="target" v-if="href"><slot /></a>
    <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
    <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
    <template v-else><slot /></template>
  </span>
</template>

<script setup>
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  to: [String, Object, Function],
  target: { type: String, default: '_blank' },
})

const href = computed(() => {
  return (
    props.data.href || props.data.uri || (typeof props.to === 'string' && props.to.includes('http') ? props.to : '')
  )
})

const path = computed(() => {
  if (typeof props.to === 'function') {
    return props.to(props.data)
  }
  return props.data.path || props.to
})
</script>
