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

const ArrowDownIcon = 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="M2.41842 6.43934C2.97631 5.85355 3.88083 5.85355 4.43872 6.43934L12 14.3787L19.5613 6.43934C20.1192 5.85355 21.0237 5.85355 21.5816 6.43934C22.1395 7.02513 22.1395 7.97487 21.5816 8.56066L13.0102 17.5607C12.4523 18.1464 11.5477 18.1464 10.9898 17.5607L2.41842 8.56066C1.86053 7.97487 1.86053 7.02513 2.41842 6.43934Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(ArrowDownIcon);
