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

const StatsIcon = props => {
  return (
    <IconWrapper {...props}>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8.84211 17.5556H6.73684V9.77778H8.84211V17.5556ZM13.0526 17.5556H10.9474V6.44444H13.0526V17.5556ZM17.2632 17.5556H15.1579V13.1111H17.2632V17.5556ZM19.8947 19.8889H4.10526V4.22222H19.8947V19.8889ZM19.8947 2H4.10526C2.94737 2 2 3 2 4.22222V19.7778C2 21 2.94737 22 4.10526 22H19.8947C21.0526 22 22 21 22 19.7778V4.22222C22 3 21.0526 2 19.8947 2Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(StatsIcon);
