<script lang="ts">
	import Loader from "$lib/components/atoms/loader.svelte";
	import { onDestroy, onMount } from "svelte";

	const initialMessages = [
		"Just a moment...",
		"Please wait...",
		"Processing...",
		"Working on it...",
		"One moment please...",
	];

	const fiveSecondMessages = [
		"Still processing...",
		"Just a bit longer...",
		"Almost there...",
		"This may take a moment...",
		"Thank you for waiting...",
	];

	const tenSecondMessages = [
		"Thanks for your patience...",
		"Still working on it...",
		"We appreciate your patience...",
		"Processing securely...",
		"Just a little longer...",
	];

	const twentySecondMessages = [
		"Thank you for waiting...",
		"Still processing – thanks for being patient...",
		"We're working on it...",
		"Your patience is appreciated...",
		"Almost done...",
	];

	const getRandomMessage = (messages: string[]) => {
		return messages[Math.floor(Math.random() * messages.length)];
	};

	let _defaultTxt = getRandomMessage(initialMessages);
	let txt = $state(_defaultTxt);

	onMount(() => {
		setTimeout(() => {
			txt = getRandomMessage(fiveSecondMessages);
		}, 5000);

		setTimeout(() => {
			txt = getRandomMessage(tenSecondMessages);
		}, 10000);

		setTimeout(() => {
			txt = getRandomMessage(twentySecondMessages);
		}, 20000);
	});

	onDestroy(() => {
		txt = _defaultTxt;
	});
</script>

<div
	class="flex h-full w-full flex-col place-items-center p-4 py-20 md:p-8 md:py-32"
>
	<Loader />
	<p class="animate-pulse py-20 text-center">{txt}</p>
</div>
