<script lang="ts">
	let { open = false, title = '', onclose, children } = $props<{
		open: boolean;
		title?: string;
		onclose: () => void;
		children: import('svelte').Snippet;
	}>();

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') onclose();
	}
</script>

<svelte:window onkeydown={open ? handleKeydown : undefined} />

{#if open}
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div
		style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5);"
		onclick={onclose}
	>
		<div
			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
			onclick={(e) => e.stopPropagation()}
		>
			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.75rem;">
				<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
				<button onclick={onclose}
					style="color: var(--color-muted-foreground); font-size: 1.25rem; line-height: 1; cursor: pointer; background: none; border: none; padding: 0.25rem;">
					&times;
				</button>
			</div>
			<div style="padding: 0 1.25rem 1.25rem; overflow-y: auto;">
				{@render children()}
			</div>
		</div>
	</div>
{/if}
