import React from 'react';
import { useDrop } from 'react-dnd';

export default function DropBox({ className, children }) {
  const [, drop] = useDrop({
    accept: 'component',
    drop: (item, monitor) => {
      const position = monitor.getSourceClientOffset();
      return {
        position
      };
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  });

  return (
    <div ref={drop} className={className} style={{ position: 'relative', flex: 1 }}>
      {children}
    </div>
  );
}
