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

const BinIcon = 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="M18.8289 7.46338V20.6579C18.8289 21.3953 18.2281 22 17.4955 22H6.57284C5.84026 22 5.2395 21.3953 5.2395 20.6579V7.46338"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.8"
        />
        <path
          d="M22 5.31679H15.962H8.08365H2"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.8"
        />
        <path
          d="M8.03297 5.26609V2.75018C8.03297 2.33682 8.44361 2 8.85426 2H15.2446C15.6553 2 15.9417 2.33937 15.9417 2.75018V5.26609"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.8"
        />
        <path
          d="M9.85536 7.46338V18.7237"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.8"
        />
        <path
          d="M14.3143 7.46338V18.7237"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.8"
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(BinIcon);
