import React, { useEffect, useState } from 'react';
import { faRedo, faTimes, faUndo } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as S from './CardImage.style';

export const CardImage = React.memo(function ({ dragging, dragOverlay, value, disabled, onRotate, listeners }: any) {
   return (
      <S.ImageContainer disabled={disabled} {...listeners}>
         <div className={classNames('item', dragging && 'dragging', dragOverlay && 'dragOverlay')}>
            <div className="cover" style={{ backgroundImage: `url(${value.image})` }} />
         </div>
      </S.ImageContainer>
   );
});
