<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'resize', delta: number): void
}>()

const isDragging = ref(false)
const startX = ref(0)

const onMouseDown = (e: MouseEvent) => {
  isDragging.value = true
  startX.value = e.clientX
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
}

const onMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  const delta = e.clientX - startX.value
  startX.value = e.clientX
  emit('resize', delta)
}

const onMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onMouseMove)
  document.removeEventListener('mouseup', onMouseUp)
  document.body.style.cursor = ''
  document.body.style.userSelect = ''
}
</script>

<template>
  <div 
    class="resizer" 
    :class="{ dragging: isDragging }"
    @mousedown="onMouseDown"
  ></div>
</template>

<style scoped>
.resizer {
  width: 4px;
  background: #181818;
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.2s;
}

.resizer:hover,
.resizer.dragging {
  background: #007acc;
}
</style>
