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

<div class="skeleton-list" aria-busy="true" aria-live="polite">
	{#each Array(items) as _, i (i)}
		<div class="skeleton-item">
			<div class="skeleton-icon"></div>
			<div class="skeleton-content">
				<div class="skeleton-line wide"></div>
				<div class="skeleton-line short"></div>
			</div>
		</div>
	{/each}
	{#if message}
		<p class="skeleton-message">{message}</p>
	{/if}
</div>

<style>
	.skeleton-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.skeleton-item {
		display: flex;
		gap: 1rem;
		padding: 1rem;
		background: #f9fafb;
		border-radius: 0.5rem;
	}

	.skeleton-icon {
		width: 2.5rem;
		height: 2.5rem;
		background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
		background-size: 200% 100%;
		border-radius: 0.5rem;
		animation: shimmer 1.5s infinite;
		flex-shrink: 0;
	}

	.skeleton-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		justify-content: center;
	}

	.skeleton-line {
		height: 0.75rem;
		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: 80%;
	}

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

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

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