import { motion, useDragControls } from "framer-motion";
import { useRef, ReactNode } from "react";

type DraggableWrapperProps = {
  children: ReactNode;
  className?: string;
};

const DraggableWrapper: React.FC<DraggableWrapperProps> = ({ children, className }) => {
  const controls = useDragControls();
  const ref = useRef<HTMLDivElement>(null);

  return (
    <motion.div
      ref={ref}
      drag
      dragControls={controls}
      dragConstraints={{ top: -1, bottom: 1, left: -1, right: 1 }}
      dragElastic={0.05}
        className={`${className} cursor-grab`}
      style={{ display: "inline-block" }}
    >
      {children}
    </motion.div>
  );
};

export default DraggableWrapper;