<script lang="ts">
	import { isUrl, truncateUrlDisplay } from '$lib/utils/urlUtils';

	interface Props {
		text: string;
		class?: string;
	}
	let { text, class: className = '' }: Props = $props();
</script>

{#if isUrl(text)}
	<a
		href={text}
		target="_blank"
		rel="noopener noreferrer"
		class="text-blue-400 hover:underline {className}"
		onclick={(e) => e.stopPropagation()}
	>{truncateUrlDisplay(text)}</a>
{:else}
	<span class={className}>{text}</span>
{/if}
