<!--
  Task 8: Skeleton card placeholder for project cards during loading.
-->
<script lang="ts">
	import Skeleton from './Skeleton.svelte';
</script>

<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)]">
	<div class="flex items-start justify-between">
		<div class="flex-1 space-y-2">
			<Skeleton width="60%" height="1.25rem" />
			<Skeleton width="80%" height="0.875rem" />
		</div>
		<Skeleton width="4rem" height="1.5rem" rounded />
	</div>
	<div class="mt-4 flex gap-4">
		<Skeleton width="5rem" height="0.875rem" />
		<Skeleton width="4rem" height="0.875rem" />
	</div>
	<div class="mt-3 flex gap-3">
		<Skeleton width="3.5rem" height="0.75rem" />
		<Skeleton width="4.5rem" height="0.75rem" />
	</div>
</div>
