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

export const FieldNumberIcon = ({color}) => {
    const {iconColorTertiary} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" style={{display: `block`}}>
            <path fill={color || iconColorTertiary} fillRule="evenodd" d="M3.99918,12.0411 C3.97773,12.5743 3.53859,13 3,13 C2.44772,13 2,12.5524 2,12.0002 L2,6.5013 L1.70711,6.70837 C1.31658,7.09881 0.683418,7.09881 0.292893,6.70837 C-0.0976311,6.31792 -0.0976311,5.68488 0.292893,5.29444 L2.29289,3.29484 C2.92286,2.665 4,3.11108 4,4.0018 L4,4.97831 C4.00269,4.86216 4.02583,4.74451 4.07152,4.63029 C4.17902,4.3616 4.39516,4.03745 4.75982,3.73364 C5.31573,3.27047 6.06758,3.002 7,3.002 C9.0075,3.002 10,4.24238 10,6.0014 C10,7.16057 9.54068,7.92594 8.18087,9.62537 L7.064,11.0004 L9,11.0004 C9.55229,11.0004 10,11.448 10,12.0002 C10,12.5524 9.55229,13 9,13 L5,13 C4.423,13 4.02231,12.5408 3.99918,12.0411 Z M4,12 C4.01194,11.8056 4.08123,11.6095 4.21913,11.4355 L6.61913,8.40717 C7.65932,7.09466 8,6.5215 8,6.00944 C8,5.26182 7.7925,5 7,5 C6.53242,5 6.23427,5.10749 6.04018,5.27075 C5.99094,5.31218 5.95884,5.34677 5.94193,5.36499 C5.92953,5.37834 5.92531,5.3829 5.92848,5.3749 C5.72336,5.89252 5.14139,6.14429 4.62861,5.93724 C4.24517,5.78242 4.00899,5.41488 4,5.02289 L4,12 Z M14.0001,6 C14.0001,5.25937 13.7926,5 13.0001,5 C12.5326,5 12.2344,5.10648 12.0404,5.26822 C11.9911,5.30926 11.959,5.34353 11.9421,5.36157 C11.9297,5.3748 11.9255,5.37932 11.9287,5.37139 C11.7236,5.88417 11.1416,6.13359 10.6288,5.92848 C10.1161,5.72336 9.86668,5.14139 10.0718,4.62861 C10.1793,4.35987 10.3954,4.03566 10.76,3.73178 C11.3159,3.26852 12.0678,3 13.0001,3 C15.0075,3 16,4.24063 16,6 C16,7.498 15.2396,7.99444 15.2396,7.99444 L15.261,7.998 C15.261,7.998 16,8.498 16,10 C16,11.7594 15.0075,13 13.0001,13 C12.0678,13 11.3159,12.7315 10.76,12.2682 C10.3954,11.9643 10.1793,11.6401 10.0718,11.3714 C9.86668,10.8586 10.1161,10.2766 10.6288,10.0715 C11.1416,9.86641 11.7236,10.1158 11.9287,10.6286 C11.9255,10.6207 11.9297,10.6252 11.9421,10.6384 C11.959,10.6565 11.9911,10.6907 12.0404,10.7318 C12.2344,10.8935 12.5326,11 13.0001,11 C13.7926,11 14.0001,10.7406 14.0001,10 C14.0001,9.47761 13.5494,9.00584 13.0001,8.998 L13.0001,8.99799 C12.99,8.99787 12.0404,8.98602 12.0404,7.99444 C12.0404,7 13.0001,7 13.0001,7 C13.5651,7 14.0001,6.53397 14.0001,6 Z" />
        </svg>
    );
};

FieldNumberIcon.displayName = `FieldNumberIcon`;

FieldNumberIcon.propTypes = {
    color: PropTypes.string,
};