<script>
	import { m } from '$lib/paraglide/messages';

	/**
	 * @typedef {Object} EmptyProps
	 * @property {string} [message]
	 * @property {string} [icon]
	 * @property {import('svelte').Snippet} [children]
	 */

	/** @type {EmptyProps} */
	let { message = m.no_data(), icon = '📭', children } = $props();
</script>

<div class="empty">
	<div class="empty-icon">{icon}</div>
	<p class="empty-message">{message}</p>
	{#if children}
		<div class="empty-action">
			{@render children()}
		</div>
	{/if}
</div>

<style>
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--space-3xl) var(--space-xl);
		text-align: center;
	}

	.empty-icon {
		font-size: var(--space-3xl);
		margin-bottom: var(--space-md);
		opacity: 0.5;
	}

	.empty-message {
		color: var(--color-text-secondary);
		font-size: var(--font-size-lg);
		margin: 0 0 var(--space-lg) 0;
	}

	.empty-action {
		margin-top: var(--space-sm);
	}
</style>
