<script>"use strict";
import { fade } from "svelte/transition";
import { createEventDispatcher } from "svelte";
import Icon from "./Icon.svelte";
export let open = false;
export let onClose;
export let closeButton = false;
export let dismissible = true;
export let size = "md";
const dispatch = createEventDispatcher();
function closeModal() {
  if (dismissible) {
    onClose();
    dispatch("close");
  }
}
function handleClose() {
  onClose();
  dispatch("close");
}
function handleKeydown(event) {
  if (event.key === "Escape" && dismissible) {
    closeModal();
  }
}
</script>

{#if open}
	<div
		role="button"
		tabindex={0}
		class="fixed top-0 left-0 w-full h-full bg-stone-950 bg-opacity-50 flex justify-center items-center z-[1000] cursor-default"
		on:click={dismissible ? closeModal : null}
		transition:fade
		on:keydown={handleKeydown}
	>
		<div
			role="button"
			tabindex={1}
			class="bg-white rounded-xl shadow-md relative transition-all duration-300 ease-in-out cursor-default w-[340px]"
			class:md:w-[640px]={size === 'sm'}
			class:md:w-[840px]={size === 'md'}
			class:md:w-[1040px]={size === 'lg'}
			on:click|stopPropagation
			transition:fade
			on:keydown={handleKeydown}
		>
			<slot></slot>
			{#if closeButton}
				<button class="absolute top-[15px] right-6" on:click={handleClose}
					><Icon iconName="close" /></button
				>
			{/if}
		</div>
	</div>
{/if}
