<script lang="ts">
	import type { Component, Snippet } from 'svelte';
	import { cn } from '$lib/utils.js';

	type Props = {
		title?: string;
		description?: string;
		icon?: Component;
		action?: Snippet;
		class?: string;
	};

	let { title = 'Нет данных', description, icon: Icon, action, class: className }: Props = $props();
</script>

<div
	class={cn('flex flex-col items-center justify-center gap-2 px-4 py-12 text-center', className)}
>
	{#if Icon}
		<div class="mb-1 text-muted-foreground/60" aria-hidden="true">
			<Icon class="size-10" />
		</div>
	{/if}
	<p class="text-sm font-medium">{title}</p>
	{#if description}
		<p class="max-w-sm text-sm text-muted-foreground">{description}</p>
	{/if}
	{#if action}
		<div class="mt-2">{@render action()}</div>
	{/if}
</div>
