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

const MessageBubbleIcon = 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="M16.8886 16.5555H15.8886V17.5555V19.8333L12.3243 16.7945L12.0439 16.5555H11.6755H4.5C3.67156 16.5555 3 15.884 3 15.0555V4.5C3 3.67157 3.67157 3 4.5 3H19.5C20.3285 3 21 3.67156 21 4.5V15.0555C21 15.884 20.3285 16.5555 19.5 16.5555H16.8886Z"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="2"
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(MessageBubbleIcon);
