<script>
	import { XIcon } from 'lucide-svelte';
	import { fade } from 'svelte/transition';

	let { isOpen, onClose, children, heading = 'Modal' } = $props();
</script>

<div
	role="dialog"
	aria-modal="true"
	transition:fade={{ duration: 200 }}
	class="fixed inset-0 bg-black/50 flex justify-center items-center"
	onclick={(e) => {
		if (e.target === e.currentTarget) {
			onClose();
		}
	}}
>
	<div class="bg-neutral-200 rounded-lg text-black shadow-md min-w-xl">
		{#if heading}
			<div class="p-4 flex justify-between items-center border-b border-neutral-400">
				<h2 class="text-lg font-bold">{heading}</h2>
				<XIcon class="size-6 cursor-pointer" onclick={onClose} />
			</div>
		{/if}

		<div class="p-4">
			{@render children()}
		</div>
	</div>
</div>
