'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
const MIN_LEFT_PX = 400;
const MIN_RIGHT_PX = 400;
const INITIAL_LEFT_FRACTION = 0.4;
export function ResizableSplit({ left, right }) {
    const containerRef = useRef(null);
    const [leftFraction, setLeftFraction] = useState(INITIAL_LEFT_FRACTION);
    const dragging = useRef(false);
    const onPointerDown = useCallback((e) => {
        e.preventDefault();
        dragging.current = true;
        const target = e.currentTarget;
        target.setPointerCapture(e.pointerId);
    }, []);
    const onPointerMove = useCallback((e) => {
        if (!dragging.current || !containerRef.current)
            return;
        const rect = containerRef.current.getBoundingClientRect();
        const totalWidth = rect.width;
        const x = e.clientX - rect.left;
        const clampedX = Math.max(MIN_LEFT_PX, Math.min(x, totalWidth - MIN_RIGHT_PX));
        setLeftFraction(clampedX / totalWidth);
    }, []);
    const onPointerUp = useCallback(() => {
        dragging.current = false;
    }, []);
    return (_jsxs("div", { ref: containerRef, className: "flex min-h-0 flex-1", children: [_jsx("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { flexBasis: `${leftFraction * 100}%`, flexShrink: 0 }, children: left }), _jsx("div", { role: "separator", "aria-orientation": "vertical", className: "group border-border hover:bg-primary/20 relative w-px shrink-0 cursor-col-resize border-l transition-colors", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: _jsx("span", { className: "absolute inset-y-0 -right-1 -left-1" }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: right })] }));
}
