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

const BotTabIconV2 = props => {
  return (
    <IconWrapper {...props}>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M12 2C16.4183 2 20 5.48223 20 9.77778V17.5556C20 20.0102 17.9533 22 15.4286 22H8.57143C6.0467 22 4 20.0102 4 17.5556V9.77778C4 5.48223 7.58172 2 12 2Z"
          fill="white"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M15.9999 7.55566H7.99993C7.05316 7.55566 6.28564 8.30186 6.28564 9.22233C6.28564 10.1428 7.05316 10.889 7.99993 10.889H15.9999C16.9467 10.889 17.7142 10.1428 17.7142 9.22233C17.7142 8.30186 16.9467 7.55566 15.9999 7.55566Z"
          fill="#FEFEFE"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M12.0001 14.2222V18.6666"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(BotTabIconV2);
