import React, { useRef, useCallback, useState } from "react";

function DragContent({ children, style }) {
  const [data, setData] = useState(null);
  const domRef = useRef(null);
  const onDrop = useCallback((event) => {
    event.stopPropagation();
    const ydata = JSON.parse(event.dataTransfer.getData("DATA"));
    setData(ydata);
  }, []);

  const allowDrop = useCallback((e) => e.preventDefault(), []);
  console.log(data);
  return (
    <div ref={domRef} onDrop={onDrop} onDragOver={allowDrop} style={style}>
      {children}
    </div>
  );
}

export default DragContent;
