<script lang="ts">
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';
	let { message = 'Loading...' } = $props();

	let messageIndex = $state(0);

	onMount(() => {
		const interval = setInterval(() => {
			if (messageIndex === 0) {
				messageIndex = 1;
			} else {
				messageIndex = messageIndex === 1 ? 2 : 1;
			}
		}, 1500);

		return () => clearInterval(interval);
	});
</script>

<div class="loading-state">
	<div class="track">
		<div class="shuttle"></div>
	</div>
	<div class="message-container">
		{#if messageIndex === 0}
			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>{message}</p>
		{:else if messageIndex === 1}
			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Slow connection...</p>
		{:else}
			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Still trying...</p>
		{/if}
	</div>
</div>

<style>
	.loading-state {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 4rem 2rem;
		width: 75%;
		margin: auto;
	}

	.track {
		width: 160px;
		height: 3px;
		background-color: var(--color-title);
		border-radius: 4px;
		position: relative;
		overflow: hidden;
	}

	.shuttle {
		position: absolute;
		width: 50%;
		height: 100%;
		border-radius: 4px;
		background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
		animation: data-travel 1.6s infinite ease-in-out;
	}

	.message-container {
		display: grid;
		place-items: center;
		height: 2rem;
		margin-top: 1rem;
	}

	p {
		grid-area: 1 / 1;
		font-family: 'URW Gothic', sans-serif;
		letter-spacing: 0.15em;
		color: var(--color-title);
	}

	@keyframes data-travel {
		0% {
			left: -50%;
		}
		100% {
			left: 100%;
		}
	}
</style>
