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

const MessageBubbleIconV3 = props => {
  return (
    <IconWrapper {...props}>
      <svg width="36px" height="36px" viewBox="0 0 36 36">
        <g
          id="Assets"
          stroke="none"
          strokeWidth="1"
          fill="none"
          fillRule="evenodd"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <g
            id="image/bot-says"
            fill={getObjectValue(
              props.theme.colors,
              props.iconColor,
              "#A2CE70",
            )}
            stroke={getObjectValue(
              props.theme.colors,
              props.iconColor,
              "#89BF4B",
            )}
            strokeWidth="2"
          >
            <path
              d="M34,6 L34,22.8888889 C34,25.0980279 32.209139,26.8888889 30,26.8888889 L20.1628746,26.8888889 L11.48078,34 L11.48078,26.8888889 L6,26.8888889 C3.790861,26.8888889 2,25.0980279 2,22.8888889 L2,6 C2,3.790861 3.790861,2 6,2 L30,2 C32.209139,2 34,3.790861 34,6 Z"
              id="Rectangle-314"
            />
          </g>
        </g>
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(MessageBubbleIconV3);
