import React from 'react';
import PropTypes from "prop-types";
import useStylesVariables from "@fibery/vizydrop-styles-variables/useStylesVariables";

export function MetricIcon({textColor, bgColor}) {
    const {iconColorDefault, iconColorLight} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" version="1.1" style={{display: `block`}}>
            <path
                d="M13.3333 1H2.66667C1.19391 1 0 2.19391 0 3.66667V11.6667C0 13.1394 1.19391 14.3333 2.66667 14.3333H13.3333C14.8061 14.3333 16 13.1394 16 11.6667V3.66667C16 2.19391 14.8061 1 13.3333 1Z"
                fill={bgColor || iconColorLight}
            />
            <path
                d="M4.70147 7.60763C5.21304 7.60763 5.61814 7.74305 5.91675 8.01388C6.21536 8.28471 6.36467 8.65393 6.36467 9.12152C6.36467 9.66318 6.19453 10.0868 5.85425 10.3923C5.51629 10.6956 5.0348 10.8472 4.40981 10.8472C3.84268 10.8472 3.39707 10.7558 3.073 10.5729V9.83333C3.2605 9.93982 3.47578 10.0219 3.71883 10.0798C3.96189 10.1377 4.18758 10.1667 4.39591 10.1667C4.76398 10.1667 5.04407 10.0845 5.23619 9.92017C5.42832 9.75578 5.52438 9.51504 5.52438 9.19791C5.52438 8.59142 5.13782 8.28819 4.36467 8.28819C4.25587 8.28819 4.12161 8.29976 3.96189 8.32291C3.80216 8.34374 3.66212 8.36805 3.54175 8.39582L3.17717 8.18054L3.37161 5.70138H6.0105V6.42708H4.09036L3.97578 7.68402C4.05679 7.67014 4.15518 7.65393 4.27092 7.63541C4.38897 7.61689 4.53249 7.60763 4.70147 7.60763ZM7.698 7.22222C7.698 7.56712 7.73157 7.82406 7.7987 7.99305C7.86583 8.16203 7.97578 8.24652 8.12855 8.24652C8.43411 8.24652 8.58689 7.90509 8.58689 7.22222C8.58689 6.53934 8.43411 6.19791 8.12855 6.19791C7.97578 6.19791 7.86583 6.2824 7.7987 6.45138C7.73157 6.62037 7.698 6.87731 7.698 7.22222ZM9.26053 7.21527C9.26053 7.74768 9.16444 8.14814 8.97235 8.41666C8.78249 8.68286 8.50124 8.81597 8.12855 8.81597C7.77671 8.81597 7.50356 8.67823 7.30911 8.40277C7.11698 8.12499 7.02092 7.72916 7.02092 7.21527C7.02092 6.1574 7.39013 5.62846 8.12855 5.62846C8.49199 5.62846 8.77092 5.7662 8.96533 6.04166C9.16213 6.31481 9.26053 6.70601 9.26053 7.21527ZM11.0035 9.24999C11.0035 9.5949 11.0371 9.85301 11.1043 10.0243C11.1737 10.1956 11.2848 10.2812 11.4376 10.2812C11.7408 10.2812 11.8924 9.9375 11.8924 9.24999C11.8924 8.57175 11.7408 8.23263 11.4376 8.23263C11.2848 8.23263 11.1737 8.31597 11.1043 8.48263C11.0371 8.6493 11.0035 8.90509 11.0035 9.24999ZM12.566 9.24999C12.566 9.7824 12.4699 10.1817 12.2779 10.4479C12.0858 10.7141 11.8056 10.8472 11.4376 10.8472C11.0858 10.8472 10.8126 10.7107 10.6181 10.4375C10.4237 10.162 10.3265 9.7662 10.3265 9.24999C10.3265 8.19213 10.6969 7.66318 11.4376 7.66318C11.794 7.66318 12.0707 7.79976 12.2675 8.07291C12.4665 8.34606 12.566 8.73842 12.566 9.24999ZM11.5348 5.70138L8.71883 10.7778H8.04522L10.8612 5.70138H11.5348Z"
                fill={textColor || iconColorDefault}
            />
        </svg>
    );
}

MetricIcon.propTypes = {
    textColor: PropTypes.string,
    bgColor: PropTypes.string,
};
