import React from "react";
import PropTypes from "prop-types";
import { withTheme } from "styled-components";
import { getObjectValue } from "../utils/util";
import IconWrapper from "../IconWrapper";

const DragCursor = props => {
  return (
    <IconWrapper {...props}>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_2140_5892)">
          <path
            d="M10.1818 9.27273H13.8182V6.54545H16.5455L12 2L7.45455 6.54545H10.1818V9.27273ZM9.27273 10.1818H6.54545V7.45455L2 12L6.54545 16.5455V13.8182H9.27273V10.1818ZM22 12L17.4545 7.45455V10.1818H14.7273V13.8182H17.4545V16.5455L22 12ZM13.8182 14.7273H10.1818V17.4545H7.45455L12 22L16.5455 17.4545H13.8182V14.7273Z"
            fill={getObjectValue(
              props.theme.colors,
              props.iconColor,
              props.theme.colors.grey.deep,
            )}
          />
        </g>
        <defs>
          <clipPath id="clip0_2140_5892">
            <rect width="24" height="24" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </IconWrapper>
  );
};

DragCursor.propTypes = {
  iconColor: PropTypes.string,
};

export default withTheme(DragCursor);
