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

const APIIconV2 = 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.9418 17.6642C22.6695 9.7114 16.4925 2.6983 8.14526 2"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M18.2902 16.4083C18.79 10.946 14.5474 6.12904 8.81409 5.64941"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M7.99539 21.9998C11.3066 21.9998 13.9908 19.4331 13.9908 16.267C13.9908 13.1008 11.3066 10.5342 7.99539 10.5342C4.68423 10.5342 2 13.1008 2 16.267C2 19.4331 4.68423 21.9998 7.99539 21.9998Z"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(APIIconV2);
