<template>
  <a :href="href" :target="target" class="text inline-flex-row">
    {{ content }}
    <Icon :name="`ph:${linkIcon}-duotone`" mode="svg" />
  </a>
</template>

<script setup lang="ts">
import type { RichTextLink } from './Types'

const { href } = defineProps<RichTextLink>()

const linkIcon = href.startsWith('http') ? 'globe' : 'arrow-square-in'
</script>
