<script lang="ts">
  import Container from '$lib/components/dashboard/modal/Container.svelte';
  import Panel from '$lib/components/dashboard/modal/Panel.svelte';
  import type { ModalType } from '$lib/models/modal';
  import { modalStore } from '$lib/stores/modal';
  import { browser } from '$app/environment';

  export let navbar: boolean = false;
  export let modal: ModalType | null;
</script>

{#if browser && $modalStore && $modalStore.visible && (!navbar ? modal?.navbarMount !== true : modal?.navbarMount === true)}
  <Container
    invisible={modal?.container?.invisible}
    verticalEnd={modal?.container?.verticalEnd}
    align={modal?.container?.align}
    path={modal?.path}
    navbarMount={modal?.navbarMount}>
    <Panel
      transitionX={modal?.transition?.x ?? 0}
      transitionY={modal?.transition?.y ?? 25}
      navbarMount={modal?.navbarMount}>
      <svelte:component this={modal?.component} {...$modalStore?.data} />
    </Panel>
  </Container>
{/if}
