text: import React, { useRef, useContext } from 'react';
  import { useDrag, useDrop } from 'react-dnd';
  
  import  BoardContext from '../Board/context';
  
  import { Container, Label } from './styles'
  
  export default function Card({ data, index, listIndex }) {
      const ref = useRef();
      const { move } = useContext(BoardContext);
  
      const [{ isDragging }, dragRef ] = useDrag({
          item : {
                  type : 'CARD',
                  id : data.id,
                  index,
                  listIndex,
                  content : data.content
          },
          collect : monitor =>({
              isDragging : monitor.isDragging(),
          })
      });
  
      const [ , dropRef ] = useDrop({
          accept : 'CARD',
          hover(item, monitor){
              const draggedListIndex = item.listIndex;
              const draggedIndex =  item.index;
  
              const targetListIndex = listIndex;
              const targetIndex = index;
  
              if( draggedIndex === targetIndex &&  draggedListIndex === targetListIndex){
                  return;
              }
  
              const targetSize = ref.current.getBoundingClientRect();
              const targetCenter = (targetSize.bottom - targetSize.top ) / 2;
              const draggedOffset = monitor.getClientOffset();
              const draggedTop = draggedOffset.y - targetSize.top;
  
              if( draggedIndex < targetIndex && draggedTop < targetCenter){
                  return;
              }
  
              if(draggedIndex > targetIndex && draggedTop > targetCenter){
                  return;
              }
              
              move(draggedListIndex, targetListIndex, draggedIndex, targetIndex, );
              item.index = targetIndex;
              item.listIndex = targetListIndex;
  
          }
      })
  
      dragRef(dropRef(ref));
  
      return (
          <Container ref={ref} isDragging={isDragging}>
              <header>
                 { data.labels.map( label =>( <Label key={label} color={label} /> ) )}
              </header>
  
              <p>{data.content}</p>
              { data.user && <img src={data.user} alt=" " /> } 
          </Container>
      )
  }
  