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

  let { show = $bindable(), closable = true, children }: {
    show: boolean,
    closable: boolean
    children: Snippet<[{ closeOverlay: () => void }]>
  } = $props();

  function closeOverlay() {
    if (!closable) return;
    show = false;
  }
</script>

{#if show}
  <div class="fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
    <button type="button" class="bg-base-100/50 w-full grow z-20"
            transition:fade={{duration:200}}
            onclick={closeOverlay}
            aria-label="Close Overlay"
    ></button>
    <div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2 z-20"
         data-theme="light"
         transition:slide>
      {@render children({ closeOverlay })}
    </div>
  </div>
{/if}