<script lang="ts">
	import { tick, untrack } from "svelte";

	interface Props {
		value: string;
		class?: string;
	}

	let { value, class: className }: Props = $props();

	let el: HTMLSpanElement | undefined = $state();
	let shown = $state(untrack(() => value));
	let phase = $state<"exit" | "enter" | undefined>();

	$effect(() => {
		const next = value;
		if (!el || next === shown) return;

		const dur = parseFloat(getComputedStyle(el).getPropertyValue("--text-swap-dur")) || 150;

		phase = "exit";
		const timer = setTimeout(() => {
			void (async () => {
				shown = next;
				phase = "enter";
				await tick();
				void el?.offsetHeight;
				phase = undefined;
			})();
		}, dur);

		return () => clearTimeout(timer);
	});
</script>

<span bind:this={el} class="text-swap {className ?? ''}" data-swap={phase}>{shown}</span>