<script lang="ts">
	let { title, children, props = {} } = $props();
</script>

<div {...props}>
	<div class="rounded-lg border border-ctp-surface1 bg-ctp-surface0 shadow-lg">
		<div class="border-b border-ctp-surface1 px-6 py-4">
			<h3 class="text-lg font-semibold text-ctp-text">{title}</h3>
		</div>
		<div class="p-6">
			{@render children()}
		</div>
	</div>
</div>
