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

const NotesIcon = 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="M13.3722 11.1483L13.9854 11.754L7.94627 17.7186H7.33303V17.1129L13.3722 11.1483ZM15.7719 7.18506C15.6052 7.18506 15.4319 7.25089 15.3053 7.37598L14.0854 8.58075L16.5851 11.0495L17.8049 9.84477C18.0649 9.58802 18.0649 9.17326 17.8049 8.91651L16.2451 7.37598C16.1118 7.24431 15.9452 7.18506 15.7719 7.18506ZM13.3722 9.28518L5.99988 16.5665V19.0353H8.49953L15.8718 11.754L13.3722 9.28518Z"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
        <rect
          x="3.83333"
          y="5.05575"
          width="16.3333"
          height="16.1111"
          rx="0.833333"
          stroke={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
          strokeWidth="1.66667"
        />
        <rect
          x="6.75"
          y="2"
          width="1.5"
          height="4.44445"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
        <rect
          x="9.75"
          y="2"
          width="1.5"
          height="4.44445"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
        <rect
          x="12.7499"
          y="2"
          width="1.5"
          height="4.44445"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
        <rect
          x="15.7499"
          y="2"
          width="1.5"
          height="4.44445"
          fill={getObjectValue(
            props.theme.colors,
            props.iconColor,
            props.theme.colors.grey.deep,
          )}
        />
      </svg>
    </IconWrapper>
  );
};

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

export default withTheme(NotesIcon);
