<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";

	let { icon, children }: { icon: Component<SvelteHTMLElements["svg"]>; children: Snippet } =
		$props();

	const Icon = $derived(icon);
</script>

<div
	class="rounded-b bg-background-default px-md py-2xl text-center typography-paragraph-small text-foreground-subtle"
>
	<Icon class="mx-auto mb-sm size-10 text-foreground-disabled" aria-hidden="true" />
	{@render children()}
</div>