<script lang="ts">
	import { Inbox } from 'lucide-svelte';
	import type { Snippet } from 'svelte';
	import type { ComponentType, SvelteComponent } from 'svelte';

	interface Props {
		title?: string;
		description?: string;
		icon?: ComponentType<SvelteComponent>;
		children?: Snippet;
	}

	let { 
		title = 'No data', 
		description = 'No records found.',
		icon: Icon = Inbox,
		children 
	}: Props = $props();
</script>

<div class="empty-state flex flex-col items-center justify-center py-12 text-center">
	<div class="text-base-content/30 mb-4">
		<svelte:component this={Icon} size={48} />
	</div>
	<h3 class="text-lg font-medium text-base-content/70">{title}</h3>
	<p class="text-sm text-base-content/50 mt-1 max-w-sm">{description}</p>
	{#if children}
		<div class="mt-4">
			{@render children()}
		</div>
	{/if}
</div>
