<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";

	let { icon, title, children }: { icon?: any; title: string; children: any } =
		$props();
</script>

<div class="flex flex-col gap-2 rounded-lg border bg-gray-50 p-2 md:p-4">
	<div class="flex items-center gap-2">
		{#if icon}
			<Icon {icon} cls="w-5 h-5" />
		{/if}
		<span class="text-gray-500">{title}</span>
	</div>
	{@render children()}
</div>
