<template>
	<div>
		<div v-if="isExternal">
			<a :href="to">
				<span
					:class="`fa fa-lg fa-fw ${fa}`"
					aria-hidden="true"
				/>
				&nbsp;
				<slot/>
			</a>
			&nbsp;
			<span
				class="fa fa-lg fa-fw fa-external-link"
				aria-hidden="true"
			/>
		</div>
		<router-link
			v-else
			v-bind="$props"
		>
			<span
				:class="`fa fa-lg fa-fw  ${fa}`"
				aria-hidden="true"
			/>
			&nbsp;
			<slot/>
		</router-link>
	</div>
</template>

<script>
import { RouterLink } from 'vue-router'

export default {
	props: {
		...RouterLink.props,
		fa: {
			type: String,
			default: ''
		}
	},
	computed: {
		isExternal() {
			return typeof this.to === 'string' && this.to.startsWith('http')
		}
	}
}
</script>
