text: import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import { DragSource, DropTarget } from 'react-dnd'
  import ItemTypes from './ItemTypes'
  
  const style = {
  	border: '1px dashed gray',
  	padding: '0.5rem 1rem',
  	marginBottom: '.5rem',
  	backgroundColor: 'white',
  	cursor: 'move',
  }
  
  const cardSource = {
  	beginDrag(props) {
  		return { id: props.id }
  	},
  }
  
  const cardTarget = {
  	hover(props, monitor) {
  		const draggedId = monitor.getItem().id
  
  		if (draggedId !== props.id) {
  			props.moveCard(draggedId, props.id)
  		}
  	},
  }
  
  @DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  	connectDropTarget: connect.dropTarget(),
  }))
  @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  	connectDragSource: connect.dragSource(),
  	isDragging: monitor.isDragging(),
  }))
  export default class Card extends Component {
  	static propTypes = {
  		connectDragSource: PropTypes.func.isRequired,
  		connectDropTarget: PropTypes.func.isRequired,
  		isDragging: PropTypes.bool.isRequired,
  		id: PropTypes.any.isRequired,
  		text: PropTypes.string.isRequired,
  		moveCard: PropTypes.func.isRequired,
  	}
  
  	render() {
  		const {
  			text,
  			isDragging,
  			connectDragSource,
  			connectDropTarget,
  		} = this.props
  		const opacity = isDragging ? 0 : 1
  
  		return connectDragSource(
  			connectDropTarget(<div style={{ ...style, opacity }}>{text}</div>),
  		)
  	}
  }
  