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

	const initialMessages = [
		"Processing your payment securely...",
		"Getting everything ready for you...",
		"Setting up your transaction...",
		"Starting the payment process...",
		"Initiating secure payment...",
	];

	const fiveSecondMessages = [
		"Almost there! Just finalizing your payment details...",
		"Just a few more moments while we confirm everything...",
		"We're processing your payment with care...",
		"Double-checking all the details...",
		"Making sure everything is in order...",
	];

	const tenSecondMessages = [
		"Thank you for your patience. We're making sure everything is perfect...",
		"Still working on it – thanks for being patient...",
		"We're double-checking everything to ensure a smooth transaction...",
		"Nearly there! Just completing the final security checks...",
		"Your patience is appreciated while we process this securely...",
	];

	const twentySecondMessages = [
		"Still working on it! Your transaction security is our top priority...",
		"We appreciate your continued patience while we secure your transaction...",
		"Taking extra care to process your payment safely...",
		"Still working diligently to complete your transaction...",
		"Thank you for waiting – we're ensuring everything is processed correctly...",
	];

	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>
