<script lang="ts">
  // 사이드 슬라이드 패널. uiState의 단일 drawer slot과 결합.
  // - id: 'sidebar' | 'meta' (동시에 둘 다 열리지 않음)
  // - 새 drawer 열면 ui.openDrawer(id)가 자동으로 이전 drawer를 치움
  // - 모바일/태블릿에서 메타 패널을 표시하는 폴백 경로 (xl+에서는 inline rail 사용)
  import type { Snippet } from 'svelte';
  import { ui } from '$lib/stores/uiState.svelte';

  type Side = 'left' | 'right';
  type Width = 'sidebar' | 'rail';

  interface Props {
    id: 'sidebar' | 'meta';
    side?: Side;
    width?: Width;
    children?: Snippet;
    'aria-label'?: string;
  }

  let {
    id,
    side = 'left',
    width = 'sidebar',
    children,
    'aria-label': ariaLabel = '드로어',
  }: Props = $props();

  let open = $derived(ui.isDrawerOpen(id));

  let widthClass = $derived(width === 'sidebar' ? 'w-sidebar' : 'w-rail');
  let sideClass = $derived(side === 'left' ? 'left-0' : 'right-0');
  let translateClosed = $derived(side === 'left' ? '-translate-x-full' : 'translate-x-full');

  function close() {
    ui.closeDrawer();
  }
</script>

{#if open}
  <!-- backdrop -->
  <div class="fixed inset-0 z-drawer">
    <button
      type="button"
      onclick={close}
      class="absolute inset-0 bg-scrim transition-opacity"
      aria-label="드로어 닫기"
    ></button>

    <!-- panel -->
    <aside
      class={[
        'absolute top-0 bottom-0 z-drawer bg-sidebar shadow-xl transition-transform',
        sideClass,
        widthClass,
        open ? 'translate-x-0' : translateClosed,
      ].join(' ')}
      aria-label={ariaLabel}
    >
      {@render children?.()}
    </aside>
  </div>
{/if}
