<script lang="ts">
	let { message = 'Loading...' } = $props();
</script>

<div class="loading-state">
	<div class="track">
		<div class="shuttle"></div>
	</div>
	<p>{message}</p>
</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;
	}

	p {
		font-family: 'URW Gothic', sans-serif;
		letter-spacing: 0.15em;
		color: var(--color-title);
		animation: pulse 2s infinite ease-in-out;
	}

	@keyframes data-travel {
		0% {
			left: -50%;
		}
		100% {
			left: 100%;
		}
	}

	@keyframes pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.4;
		}
	}
</style>
