<script lang="ts">
	import { trapFocus } from '$lib/Actions';
	import { fadeDefault } from '$lib/Transitions';
	import { closeModal } from 'svelte-modals';
	import { fade } from 'svelte/transition';

	export let isOpen: boolean;
</script>

{#if isOpen}
	<div
		role="dialog"
		class="pointer-events-none fixed bottom-0 left-0 right-0 top-0 z-30 flex items-center justify-center"
		transition:fade|global={fadeDefault}
		use:trapFocus
	>
		<div
			class="pointer-events-auto flex flex-col rounded-md bg-slate-800 shadow-md shadow-slate-900"
		>
			<header class="flex items-center gap-1 border-b-2 border-slate-700/50 p-2">
				<slot name="header" />
				<button
					type="button"
					class="ml-auto flex items-center text-white/30 hover:text-white"
					title="Cancel"
					on:click={closeModal}
				>
					<span class="icon-base icon-[material-symbols--close]" />
				</button>
			</header>
			<main class="m-3 w-80 sm:w-[34rem]">
				<slot />
			</main>
		</div>
	</div>
{/if}