import PropTypes from 'prop-types';
import React from 'react';
import Icon from '../icon';

export default function BoxCheckmark({
  stroke,
  fill,
  strokeWidth,
  invert,
  style: styleProp,
  ...rest // eslint-disable-line comma-dangle
}) {
  const style = {
    ...styleProp,
    ...Icon.defaultProps.style,
  };
  return (
    <svg style={style} {...rest}>
      <g
        stroke={stroke}
        strokeWidth={strokeWidth}
        fill={invert ? '#FFFFFF' : fill}
        fillRule="evenodd"
      >
        <path d="M13.6470588,0.941176471 L2.35294118,0.941176471 C2.09317647,0.941176471 1.88235294,0.730352941 1.88235294,0.470588235 C1.88235294,0.210823529 2.09317647,0 2.35294118,0 L13.6470588,0 C13.9068235,0 14.1176471,0.210823529 14.1176471,0.470588235 C14.1176471,0.730352941 13.9068235,0.941176471 13.6470588,0.941176471" />
        <path d="M14.5882353,2.82352941 L1.41176471,2.82352941 C1.152,2.82352941 0.941176471,2.61270588 0.941176471,2.35294118 C0.941176471,2.09317647 1.152,1.88235294 1.41176471,1.88235294 L14.5882353,1.88235294 C14.848,1.88235294 15.0588235,2.09317647 15.0588235,2.35294118 C15.0588235,2.61270588 14.848,2.82352941 14.5882353,2.82352941" />
        <path d="M14.5882353,19.0588235 L1.41176471,19.0588235 C0.633411765,19.0588235 0,18.4254118 0,17.6470588 L0,5.41176471 C0,4.63341176 0.633411765,4 1.41176471,4 L14.5882353,4 C15.3665882,4 16,4.63341176 16,5.41176471 L16,17.6470588 C16,18.4254118 15.3665882,19.0588235 14.5882353,19.0588235 Z" />
        <path
          d="M6.20026502,15.00025 C6.14906118,15.00025 6.09785734,14.9806485 6.0586544,14.9418456 L4.05850439,12.9416956 C3.98049854,12.8636898 3.98049854,12.7368803 4.05850439,12.6584744 C4.13651024,12.5808686 4.26331975,12.5808686 4.3413256,12.6584744 L6.19986499,14.5174138 L11.6586744,9.05820437 C11.7366803,8.98059854 11.8634898,8.98059854 11.9414956,9.05820437 C12.0195015,9.13661025 12.0195015,9.26341976 11.9414956,9.34142561 L6.34107558,14.9418456 C6.30187264,14.9810486 6.2506688,15.00025 6.19946496,15.00025 L6.20026502,15.00025 Z"
          stroke={invert ? fill : '#FFFFFF'}
          transform="translate(8.000000, 12.000125) rotate(-1.000000) translate(-8.000000, -12.000125) "
        />
      </g>
    </svg>
  );
}

BoxCheckmark.propTypes = {
  ...Icon.propTypes,
  stroke: PropTypes.string,
  fill: PropTypes.string,
  strokeWidth: PropTypes.number,
  invert: PropTypes.bool,
};

BoxCheckmark.defaultProps = {
  ...Icon.defaultProps,
  viewBox: '0 0 16 20',
};