<script lang="ts">
	export let content: string;
	const words = content.split(' ');
	export let delay = 0;
	export let center = false;
	const delays: number[] = [];
	let total = delay;
	for (let i = 0; i < words.length; i++) {
		const delay = total + words[i].length * 35;
		delays.push(total);
		total = delay;
	}
</script>

<div class="wrapper" style="justify-content: {center ? 'center' : 'left'}">
	{#each words as word, i}
		<span class="word" style="--delay:{delays[i]}ms">{word}</span>
	{/each}
</div>

<style>
	.wrapper {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.word {
		opacity: 0;
		margin: 0 0.1em;
		animation: fadeIn 1s ease forwards;
		animation-delay: var(--delay);
		font-size: 0.7em;
		color: #fffffff2;
	}
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
</style>
