<script lang="ts">
	interface Props {
		type?: 'table' | 'card' | 'text' | 'list';
		rows?: number;
		columns?: number;
	}

	let { type = 'text', rows = 3, columns = 4 }: Props = $props();
</script>

<div class="loading-state" data-type={type}>
	{#if type === 'table'}
		<div class="space-y-2">
			<!-- Header -->
			<div class="flex gap-4">
				{#each Array(columns) as _}
					<div class="skeleton h-8 flex-1"></div>
				{/each}
			</div>
			<!-- Rows -->
			{#each Array(rows) as _}
				<div class="flex gap-4">
					{#each Array(columns) as _}
						<div class="skeleton h-10 flex-1"></div>
					{/each}
				</div>
			{/each}
		</div>
	{:else if type === 'card'}
		<div class="card bg-base-100 shadow-sm">
			<div class="card-body">
				<div class="skeleton h-6 w-1/2 mb-2"></div>
				<div class="skeleton h-4 w-full mb-1"></div>
				<div class="skeleton h-4 w-3/4"></div>
			</div>
		</div>
	{:else if type === 'list'}
		<div class="space-y-3">
			{#each Array(rows) as _}
				<div class="flex items-center gap-3">
					<div class="skeleton h-10 w-10 rounded-full"></div>
					<div class="flex-1">
						<div class="skeleton h-4 w-1/2 mb-1"></div>
						<div class="skeleton h-3 w-1/4"></div>
					</div>
				</div>
			{/each}
		</div>
	{:else}
		<!-- text -->
		<div class="space-y-2">
			<div class="skeleton h-4 w-full"></div>
			<div class="skeleton h-4 w-5/6"></div>
			<div class="skeleton h-4 w-4/6"></div>
		</div>
	{/if}
</div>
