import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Minus, X } from 'lucide-react';
import { Button } from './shadcn/button';
export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }) {
    const [_panelWidth, setPanelWidth] = useState(panelWidth);
    const handleDragStart = (e) => {
        e.preventDefault();
        let isDragging = true;
        const startX = e.pageX;
        const startWidth = _panelWidth;
        const handleMouseMove = (e) => {
            if (isDragging) {
                const deltaX = startX - e.pageX;
                const newWidth = Math.max(startWidth + deltaX, 480);
                setPanelWidth(newWidth);
            }
        };
        const handleMouseUp = () => {
            isDragging = false;
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        };
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    };
    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs("div", { className: "relative z-20", children: [backdrop && (_jsx(motion.div, { className: "fixed inset-0 bg-black/70", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose })), _jsx("div", { className: "fixed inset-y-0 right-0 overflow-hidden", children: _jsx("div", { className: "absolute inset-0 overflow-hidden", children: _jsx("div", { className: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16", children: _jsx(motion.div, { className: "pointer-events-auto border-l", style: { width: `${_panelWidth}px` }, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: _jsxs("div", { className: "relative flex h-full", children: [_jsx("div", { className: "absolute -left-1 top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center", onMouseDown: handleDragStart, children: _jsx(Minus, { className: "rotate-90 font-semibold", strokeWidth: 4 }) }), _jsxs("div", { className: "flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl", children: [title && (_jsx("div", { className: "px-2 sm:px-4", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsx("h2", { className: "w-full text-base font-semibold leading-6", children: _jsx("div", { className: "text-2xl", children: title ?? "" }) }), _jsx("div", { className: "ml-3 flex h-7 items-center", children: _jsx(CloseButton, { onClose: onClose }) })] }) })), _jsx("div", { className: "px-2 sm:px-4", children: children })] })] }) }) }) }) })] })) }));
}
function CloseButton({ onClose }) {
    return (_jsx(Button, { alt: "Close panel", variant: "ghost", onClick: onClose, children: _jsx(X, { className: "size-6", "aria-hidden": "true" }) }));
}
//# sourceMappingURL=SidePanel.js.map