<script lang="ts">
	import type { Snippet } from 'svelte';

	let {
		icon,
		title,
		description = ''
	}: {
		icon?: Snippet;
		title: string;
		description?: string;
	} = $props();
</script>

<div class="empty-state">
	{#if icon}
		<div class="empty-state-icon">
			{@render icon()}
		</div>
	{/if}
	<h3 class="empty-state-title">{title}</h3>
	{#if description}
		<p class="empty-state-desc">{description}</p>
	{/if}
</div>

<style>
	.empty-state {
		text-align: center;
		padding: var(--sp-12) var(--sp-6);
	}

	.empty-state-icon {
		margin: 0 auto var(--sp-4);
		width: 48px;
		height: 48px;
		border-radius: var(--radius);
		background: var(--card-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.empty-state-icon :global(svg) {
		width: 24px;
		height: 24px;
		color: var(--text-4);
	}

	.empty-state-title {
		font-size: var(--text-md);
		font-weight: 500;
		color: var(--text-2);
		margin-bottom: 4px;
	}

	.empty-state-desc {
		font-size: var(--text-sm);
		color: var(--text-3);
	}
</style>
