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

	interface Props {
		icon?: Component;
		title: string;
		description?: string;
		class?: string;
		children?: import('svelte').Snippet;
	}

	let { icon: Icon, title, description, class: className = '', children }: Props = $props();
</script>

<div class="flex flex-col items-center justify-center py-12 text-center {className}">
	{#if Icon}
		<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
			<Icon class="h-6 w-6 text-slate-400" />
		</div>
	{/if}
	<h3 class="text-sm font-medium text-slate-900">{title}</h3>
	{#if description}
		<p class="mt-1 text-sm text-slate-500">{description}</p>
	{/if}
	{#if children}
		<div class="mt-4">
			{@render children()}
		</div>
	{/if}
</div>
