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

const FlagIcon = 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_5837)">
          <path
            d="M14 9.36842L13 7.26316H7V5.91579C7.6 5.55789 8 4.88421 8 4.10526C8 2.94737 7.1 2 6 2C4.9 2 4 2.94737 4 4.10526C4 4.88421 4.4 5.55789 5 5.91579V22H7V17.7895H12L13 19.8947H20V9.36842H14ZM18 17.7895H14L13 15.6842H7V9.36842H12L13 11.4737H18V17.7895Z"
            fill={getObjectValue(
              props.theme.colors,
              props.iconColor,
              props.theme.colors.grey.deep,
            )}
          />
        </g>
        <defs>
          <clipPath id="clip0_2140_5837">
            <rect width="24" height="24" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(FlagIcon);
