import React, { useState, useRef } from 'react'
import { useDrop } from 'ahooks';

export default function DropItem({ children, onDrop }: { children: any, onDrop: (e: any) => void }) {
  const dropRef = useRef(null);
  const [isHovering, setIsHovering] = useState(false);

  useDrop(dropRef, {
    onDom: (_, e) => {
      onDrop(e);
      setIsHovering(false);
    },
    onDragEnter: () => setIsHovering(true),
    onDragLeave: () => setIsHovering(false),
  });

  return (
    <div>
      <div ref={dropRef} style={{border: isHovering ? '1px solid #067bef' : ''}}>
        {
          children
        }
      </div>
    </div>
  );
}
