<script lang="ts">
  import InlineDrawer from '$lib/components/layout/InlineDrawer.svelte'

  import OverlayDrawer from '$lib/components/layout/OverlayDrawer.svelte'
  import { useIsTablet } from '$lib/compositions/layout/useIsMobile.svelte'
  import type { Snippet } from '$lib/types/svelte'

  const isTablet = useIsTablet()

  let {
    open = $bindable(),
    side,
    children,
    width
  }: {
    open: boolean
    side: 'right' | 'left'
    children: Snippet
    width: string
  } = $props()
</script>

<!-- {#if isTablet.matches} -->
{#if isTablet.current}
  <OverlayDrawer
    {width}
    bind:open
    {side}
    {children}
    modal={true}
    class="bg-surface-50 dark:bg-surface-950"
  ></OverlayDrawer>
{:else}
  <InlineDrawer {width} {open} {side} {children}></InlineDrawer>
{/if}
