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

	interface Props {
		rows?: number;
		cols?: number;
	}

	const { rows = 5, cols = 4 }: Props = $props();
</script>

<div class="overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
	<div class="border-b border-[var(--border-primary)] bg-[var(--surface-card-hover)] px-6 py-3">
		<div class="flex gap-6">
			{#each Array(cols) as _, i}
				<Skeleton width={i === 0 ? '6rem' : '5rem'} height="0.75rem" />
			{/each}
		</div>
	</div>
	{#each Array(rows) as _, i}
		<div class="flex gap-6 border-b border-[var(--border-secondary)] px-6 py-4 last:border-b-0">
			{#each Array(cols) as _, j}
				<Skeleton width={j === 0 ? '40%' : '20%'} height="0.875rem" />
			{/each}
		</div>
	{/each}
</div>
