<template>
	<span v-if="isDirect" class="simplestats-ref-icon simplestats-ref-icon--direct" v-html="directSvg" />
	<span v-else class="simplestats-ref-icon">
		<img v-if="!failed" :src="src" :alt="host" referrerpolicy="no-referrer" @error="failed = true" />
		<img v-else :src="globeUrl" :alt="host" />
	</span>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import globeUrl  from '@/images/icons/globe.svg?url';
	import directSvg from '@/images/icons/ref-direct.svg?raw';

	const props = defineProps( {
		host: { type: String, default: '' },
	} );

	const failed   = ref( false );
	const isDirect = computed( () => ! props.host || props.host === 'Direct / None' );

	const src = computed( () => {
		if ( isDirect.value ) return globeUrl;
		return `https://www.google.com/s2/favicons?domain=${ encodeURIComponent( props.host ) }&sz=64`;
	} );
</script>
