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

const VerifiedUserIcon = 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="M7.175 11.4055L6 12.603L9.33333 16L16 9.20594L14.825 8L9.33333 13.5966L7.175 11.4055Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
        <path
          d="M11 2L3 5.63636V11.0909C3 16.1364 6.41333 20.8545 11 22C15.5867 20.8545 19 16.1364 19 11.0909V5.63636L11 2ZM17.2222 11.0909C17.2222 15.2 14.5733 18.9909 11 20.1182C7.42667 18.9909 4.77778 15.2 4.77778 11.0909V6.81818L11 3.99091L17.2222 6.81818V11.0909Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(VerifiedUserIcon);
