<script lang="ts">
	interface Props {
		variant?: 'card' | 'tile';
	}
	let { variant = 'card' }: Props = $props();
</script>

{#if variant === 'card'}
	<article class="animate-pulse bg-white dark:bg-gray-900" aria-hidden="true">
		<div class="flex items-center gap-3 px-4 py-3">
			<div class="h-9 w-9 rounded-full bg-gray-200 dark:bg-gray-800"></div>
			<div class="flex-1 space-y-1.5">
				<div class="h-3 w-32 rounded bg-gray-200 dark:bg-gray-800"></div>
				<div class="h-2.5 w-20 rounded bg-gray-200 dark:bg-gray-800"></div>
			</div>
		</div>
		<!-- 4:5 matches the typical portrait card better than a square; reduces layout shift on first paint. -->
		<div class="aspect-[4/5] w-full bg-gray-200 dark:bg-gray-800"></div>
		<div class="flex gap-4 px-4 py-3">
			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
		</div>
		<div class="border-b border-gray-100 dark:border-gray-800"></div>
	</article>
{:else}
	<div class="aspect-square animate-pulse bg-gray-200 dark:bg-gray-800" aria-hidden="true"></div>
{/if}
