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

const MedicalServicesIcon = props => {
  return (
    <IconWrapper {...props}>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_2140_5858)">
          <path
            d="M20 6H16V4C16 2.9 15.1 2 14 2H10C8.9 2 8 2.9 8 4V6H4C2.9 6 2 6.9 2 8V20C2 21.1 2.9 22 4 22H20C21.1 22 22 21.1 22 20V8C22 6.9 21.1 6 20 6ZM10 4H14V6H10V4ZM20 20H4V8H20V20Z"
            fill={getObjectValue(
              props.theme.colors,
              props.iconColor,
              props.theme.colors.grey.deep,
            )}
          />
          <path d="M13 10H11V13H8V15H11V18H13V15H16V13H13V10Z" fill="#464646" />
        </g>
        <defs>
          <clipPath id="clip0_2140_5858">
            <rect width="24" height="24" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(MedicalServicesIcon);
