<script lang="ts">
  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
  import { useSidebar } from './context.svelte.js';
  import type { HTMLAttributes, Snippet } from 'svelte/elements';

  let {
    ref = $bindable(null),
    class: className,
    style,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();

  const sidebar = useSidebar();
</script>

{#if sidebar?.isMobile}
  <div
    bind:this={ref}
    data-slot="sidebar"
    data-sidebar="sidebar"
    data-mobile="true"
    class={cn(
      'bg-background text-foreground fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col transition-transform duration-300',
      sidebar.side === 'right' ? 'right-0' : 'left-0',
      sidebar.openMobile
        ? 'translate-x-0'
        : sidebar.side === 'right'
          ? 'translate-x-full'
          : '-translate-x-full',
      className
    )}
    style={style}
    {...restProps}
  >
    {children}
  </div>
{:else}
  <div
    bind:this={ref}
    data-slot="sidebar"
    data-sidebar="sidebar"
    class={cn(
      'bg-sidebar text-sidebar-foreground group/sidebar flex h-svh w-(--sidebar-width) flex-col transition-[width,transform] duration-200',
      sidebar?.collapsible === 'icon' && !sidebar?.open && 'w-(--sidebar-width-icon)',
      sidebar?.collapsible === 'offcanvas' && !sidebar?.open && '-translate-x-full',
      sidebar?.side === 'right' ? 'ml-auto' : '',
      className
    )}
    style={style}
    {...restProps}
  >
    {children}
  </div>
{/if}