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

const DataExportIcon = 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="M20.1818 4H3.81818C2.80909 4 2 4.79111 2 5.77778V18.2222C2 19.2089 2.80909 20 3.81818 20H20.1818C21.1909 20 22 19.2089 22 18.2222V5.77778C22 4.79111 21.1909 4 20.1818 4ZM20.1818 18.24H3.81818V5.76H20.1818V18.24ZM10.1818 12H8.36364L12 8.44444L15.6364 12H13.8182V15.5556H10.1818V12Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(DataExportIcon);
