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

	interface Props {
		title: Snippet | string;
		children: Snippet;
		additional?: Snippet;
		class?: ClassValue | null;
	}

	let { title, children, additional, class: className }: Props = $props();

	const cl = $derived([
		'm-2 flex flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md',
		className,
	]);
</script>

<div class={cl}>
	<span class="block">
		{#if typeof title === 'string'}
			{title}
		{:else}
			{@render title()}
		{/if}
	</span>
	<span class="block text-xl">
		{@render children()}
	</span>
	{@render additional?.()}
</div>
