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

const BlackCardDropElem = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;

const BlackCardDrop = ({addBlackCardBackToPile, children}) => {
  const [, drop] = useDrop({
    accept: 'blackCardFromPlayer',
    drop: (item) => {
      addBlackCardBackToPile(item);
    },
  });

  return (
    <BlackCardDropElem ref={drop}>
      {children}
    </BlackCardDropElem>
  )
}

export default BlackCardDrop;