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

const ArrowUpIcon = 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="M21.5816 17.5607C21.0237 18.1464 20.1192 18.1464 19.5613 17.5607L12 9.62132L4.43872 17.5607C3.88083 18.1464 2.97631 18.1464 2.41842 17.5607C1.86053 16.9749 1.86053 16.0251 2.41842 15.4393L10.9898 6.43934C11.5477 5.85355 12.4523 5.85355 13.0102 6.43934L21.5816 15.4393C22.1395 16.0251 22.1395 16.9749 21.5816 17.5607Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(ArrowUpIcon);
