frontend/src/hooks/usePanelResize.js

import { useState, useEffect, useRef } from 'react';

export const usePanelResize = (initialWidth = 40) => {
    const [leftPanelWidth, setLeftPanelWidth] = useState(initialWidth);
    const [isDragging, setIsDragging] = useState(false);
    const containerRef = useRef(null);

    const handleMouseDown = (e) => {
        setIsDragging(true);
        e.preventDefault();
    };

    const handleMouseMove = (e) => {
        if (!isDragging || !containerRef.current) return;
        
        const containerRect = containerRef.current.getBoundingClientRect();
        const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
        
        if (newLeftWidth >= 20 && newLeftWidth <= 80) {
            setLeftPanelWidth(newLeftWidth);
        }
    };

    const handleMouseUp = () => {
        setIsDragging(false);
    };

    useEffect(() => {
        if (isDragging) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            return () => {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };
        }
    }, [isDragging]);

    return {
        leftPanelWidth,
        isDragging,
        containerRef,
        handleMouseDown
    };
};