<script setup lang="ts">
import { cn } from '@/lib/utils';

defineProps<{
  accessibleLabel: string;
  isResizing: boolean;
  side: 'left' | 'right';
  valueMin: number;
  valueMax: number;
  valueNow: number;
}>();

defineEmits<{
  keydown: [event: KeyboardEvent];
  pointerdown: [event: PointerEvent];
}>();
</script>

<template>
  <button
    type="button"
    data-slot="sidebar-resize-handle"
    data-sidebar="resize-handle"
    :data-state="isResizing ? 'drag' : undefined"
    role="separator"
    aria-orientation="vertical"
    :aria-label="accessibleLabel"
    :aria-valuemin="valueMin"
    :aria-valuemax="valueMax"
    :aria-valuenow="valueNow"
    :class="
      cn(
        'absolute inset-y-0 z-30 hidden w-4 cursor-col-resize bg-transparent p-0 outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:border-l-2 after:border-l-transparent hover:after:border-l-accent-default focus-visible:after:border-l-accent-default data-[state=drag]:after:border-l-accent-default sm:flex',
        side === 'left' ? '-right-2' : '-left-2',
      )
    "
    @keydown="$emit('keydown', $event)"
    @pointerdown="$emit('pointerdown', $event)"
  />
</template>

<style scoped>
[data-slot='sidebar-resize-handle']::after {
  content: '';
}
</style>
