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

const TravelIcon = 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_5900)">
          <path
            d="M20 6.78947H17V4.89474C17 3.84316 16.11 3 15 3H9C7.89 3 7 3.84316 7 4.89474V6.78947H4C2.89 6.78947 2 7.63263 2 8.68421V19.1053C2 20.1568 2.89 21 4 21H20C21.11 21 22 20.1568 22 19.1053V8.68421C22 7.63263 21.11 6.78947 20 6.78947ZM9 4.89474H15V6.78947H9V4.89474ZM20 19.1053H4V17.2105H20V19.1053ZM20 14.3684H4V8.68421H7V10.5789H9V8.68421H15V10.5789H17V8.68421H20V14.3684Z"
            fill={getObjectValue(
              props.theme.colors,
              props.iconColor,
              props.theme.colors.grey.deep,
            )}
          />
        </g>
        <defs>
          <clipPath id="clip0_2140_5900">
            <rect width="24" height="24" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(TravelIcon);
