<script lang="ts">
	import { fade, fly } from 'svelte/transition';

	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}
	<div
		role="presentation"
		class="fixed inset-0 z-[9999] flex items-center justify-center"
		transition:fade={{ duration: 150 }}
	>
		<!-- Backdrop -->
		<div
			class="absolute inset-0 bg-black/50"
			onclick={onclose}
			role="presentation"
		></div>

		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
		<!-- Panel -->
		<div
			role="dialog"
			aria-modal="true"
			aria-label={title}
			tabindex="-1"
			class="relative bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => { if (e.key === 'Escape') onclose(); }}
			transition:fly={{ y: -20, duration: 200 }}
		>
			<div class="flex items-center justify-between mb-4">
				<h3 class="text-lg font-semibold">{title}</h3>
				<button onclick={onclose}
					class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] text-xl leading-none cursor-pointer bg-transparent border-none p-1 transition-colors"
					aria-label="Close">
					&times;
				</button>
			</div>
			{@render children()}
		</div>
	</div>
{/if}
