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

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

<div
	class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md"
>
	<div class="flex items-center gap-2">
		{#if icon}
			<Icon {icon} cls="w-5 h-5" />
		{/if}
		<Title size="h5" color="black">{title}</Title>
	</div>
	{@render children()}
</div>
