<script setup lang="ts">
interface Props {
  to: string
  target?: string
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  target: '',
  class: '',
})

const componentTag = computed(() => {
  return props.target === '_blank' ? 'a' : 'AtomsLocaleLink'
})

const componentProps = computed(() => {
  if (props.target === '_blank') {
    return {
      href: props.to,
      target: props.target,
      class: props.class,
    }
  }

  return {
    to: props.to,
    class: props.class,
  }
})
</script>

<template>
  <component :is="componentTag" v-bind="{ ...$attrs, ...componentProps }">
    <slot />
  </component>
</template>
