<script lang="ts">
	let { message = 'Chargement...' }: { message?: string } = $props();
</script>

<div class="skeleton-card" aria-busy="true" aria-live="polite">
	<div class="skeleton-line wide"></div>
	<div class="skeleton-line medium"></div>
	<div class="skeleton-line short"></div>
	{#if message}
		<p class="skeleton-message">{message}</p>
	{/if}
</div>

<style>
	.skeleton-card {
		padding: 1.5rem;
		background: #f9fafb;
		border-radius: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.skeleton-line {
		height: 1rem;
		background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
		background-size: 200% 100%;
		border-radius: 0.25rem;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-line.wide {
		width: 100%;
	}

	.skeleton-line.medium {
		width: 75%;
	}

	.skeleton-line.short {
		width: 50%;
	}

	.skeleton-message {
		margin: 0.5rem 0 0;
		font-size: 0.875rem;
		color: #9ca3af;
	}

	@keyframes shimmer {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}
</style>
