<script lang="ts">
	let {
		rows = 3,
		variant = 'default' as 'default' | 'card'
	}: {
		rows?: number;
		variant?: 'default' | 'card';
	} = $props();
</script>

<div class="skeleton-rows">
	{#each Array(rows) as _, i}
		<div class="skeleton-row">
			<div class="skeleton skeleton-circle"></div>
			<div class="skeleton-text">
				<div class="skeleton skeleton-line w-2-3"></div>
				<div class="skeleton skeleton-line w-1-3"></div>
			</div>
			<div class="skeleton skeleton-line skeleton-amount"></div>
		</div>
	{/each}
</div>

<style>
	.skeleton-rows {
		display: flex;
		flex-direction: column;
	}

	.skeleton-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
	}

	.skeleton-row + .skeleton-row {
		border-top: 1px solid var(--border);
	}

	.skeleton {
		background: linear-gradient(
			90deg,
			var(--card, #161619) 25%,
			var(--card-hover, #1c1c20) 50%,
			var(--card, #161619) 75%
		);
		background-size: 200% 100%;
		animation: shimmer 1.5s infinite;
		border-radius: var(--radius-sm);
	}

	@keyframes shimmer {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}

	.skeleton-circle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.skeleton-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--sp-1.5);
	}

	.skeleton-line {
		height: 14px;
	}

	.w-2-3 {
		width: 66%;
	}

	.w-1-3 {
		width: 33%;
	}

	.skeleton-amount {
		width: 64px;
		height: 14px;
		flex-shrink: 0;
	}
</style>
