<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,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();

  const sidebar = useSidebar();
</script>

<button
  bind:this={ref}
  data-slot="sidebar-trigger"
  data-sidebar="trigger"
  class={cn('size-7 inline-flex items-center justify-center rounded-md p-0 text-sidebar-foreground/70 outline-none transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring', className)}
  onclick={sidebar?.toggleSidebar}
  {...restProps}
>
  {children ?? (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  )}
</button>