import { clamp } from './util.js'

/**
 * Resizable controller. Drag the handle; the engine clamps the size
 * to [min, max] and reports every change through onResize.
 */
export function createResizable(el, { min = 80, max = Infinity, onResize } = {}) {
  let size = el.getBoundingClientRect().width
  const onMove = (e) => {
    size = clamp(size + e.movementX, min, max)
    el.style.inlineSize = size + 'px'
    onResize?.(size)
  }
  const stop = () => window.removeEventListener('pointermove', onMove)
  el.addEventListener('pointerdown', () => {
    window.addEventListener('pointermove', onMove)
    window.addEventListener('pointerup', stop, { once: true })
  })
  return () => stop()
}