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

export const FieldIdIcon = ({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="M13.1955,6.62891 L11.3192,6.62891 L10.1466,9.44325 L11.3192,9.44325 C11.8373,9.44325 12.2573,9.86326 12.2573,10.3814 C12.2573,10.8995 11.8373,11.3195 11.3192,11.3195 L9.36483,11.3195 L8.07192,14.4225 C7.87265,14.9007 7.32341,15.1269 6.84516,14.9276 C6.36691,14.7283 6.14075,14.1791 6.34002,13.7008 L7.33225,11.3195 L4.67427,11.3195 L3.38136,14.4225 C3.18209,14.9007 2.63285,15.1269 2.1546,14.9276 C1.67635,14.7283 1.45019,14.1791 1.64946,13.7008 L2.6417,11.3195 L1.93811,11.3195 C1.42001,11.3195 1,10.8995 1,10.3814 C1,9.86326 1.42001,9.44325 1.93811,9.44325 L3.42345,9.44325 L4.59609,6.62891 L3.81433,6.62891 C3.29623,6.62891 2.87622,6.20891 2.87622,5.6908 C2.87622,5.1727 3.29623,4.75269 3.81433,4.75269 L5.37785,4.75269 L6.70083,1.57754 C6.9001,1.09929 7.44934,0.873136 7.92759,1.07241 C8.40584,1.27168 8.632,1.82092 8.43273,2.29917 L7.41043,4.75269 L10.0684,4.75269 L11.3914,1.57754 C11.5907,1.09929 12.1399,0.873136 12.6182,1.07241 C13.0964,1.27168 13.3226,1.82092 13.1233,2.29917 L12.101,4.75269 L13.1955,4.75269 C13.7136,4.75269 14.1336,5.1727 14.1336,5.6908 C14.1336,6.20891 13.7136,6.62891 13.1955,6.62891 Z M5.45595,9.44329 L8.11393,9.44329 L9.28657,6.62896 L6.62859,6.62896 L5.45595,9.44329 Z" />
        </svg>
    );
};

FieldIdIcon.displayName = `FieldIdIcon`;

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