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

export const FieldDateIcon = ({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="M11,1 L5,1 C5,0.44772 4.55228,0 4,0 C3.44772,0 3,0.44772 3,1 L2.99188,1 C1.33911,1 0,2.34776 0,4.00586 L0,11.9941 C0,13.6534 1.33768,15 2.99188,15 L13.0081,15 C14.6609,15 16,13.6522 16,11.9941 L16,4.00586 C16,2.3466 14.6623,1 13.0081,1 L13,1 C13,0.44772 12.5523,0 12,0 C11.4477,0 11,0.44772 11,1 Z M13,3 L13.0081,3 C13.5548,3 14,3.4482 14,4.00586 L14,11.9941 C14,12.5505 13.5534,13 13.0081,13 L2.99188,13 C2.44523,13 2,12.5518 2,11.9941 L2,4.00586 C2,3.44946 2.44658,3 2.99188,3 L3,3 C3,3.55228 3.44772,4 4,4 C4.55228,4 5,3.55228 5,3 L11,3 C11,3.55228 11.4477,4 12,4 C12.5523,4 13,3.55228 13,3 Z M9.98946,4.8694 C10.4465,4.40765 11.2193,4.74013 11.2193,5.38099 L11.2193,11.0785 C11.2193,11.4764 10.8995,11.8033 10.4994,11.8033 C10.0994,11.8033 9.77952,11.4764 9.77952,11.0785 L9.77952,7.02089 C9.53059,7.10104 9.24689,7.04146 9.04965,6.84216 C8.76972,6.55933 8.76972,6.10182 9.04965,5.81898 L9.98946,4.8694 Z M4.68076,5.18112 C5.08215,4.84315 5.61867,4.65622 6.27039,4.65622 C6.95784,4.65622 7.50094,4.86496 7.87012,5.26075 C8.23654,5.65358 8.40001,6.19688 8.40001,6.80539 C8.40001,7.33893 8.22107,7.7421 8.04052,8.01174 C7.98328,8.09723 7.92586,8.16937 7.87384,8.22827 C7.92592,8.28753 7.98345,8.36014 8.0408,8.44617 C8.22112,8.71663 8.40001,9.1207 8.40001,9.6542 C8.40001,10.2627 8.23654,10.806 7.87012,11.1988 C7.50094,11.5946 6.95784,11.8033 6.27039,11.8033 C5.61867,11.8033 5.08215,11.6164 4.68076,11.2784 C4.42808,11.0657 4.27087,10.8342 4.19192,10.6347 C4.04561,10.2651 4.22252,9.8432 4.59247,9.6937 C4.95846,9.5458 5.37072,9.722 5.52299,10.0823 C5.52513,10.0853 5.52827,10.0895 5.53255,10.0948 C5.54657,10.112 5.57004,10.1375 5.60446,10.1665 C5.72683,10.2695 5.92748,10.3537 6.27039,10.3537 C6.59284,10.3537 6.74335,10.2834 6.82132,10.2007 C6.90243,10.1146 6.9602,9.9575 6.9602,9.6542 C6.9602,9.282 6.65027,8.95457 6.27039,8.95457 L6.2693,8.95457 L6.26803,8.95456 L6.26495,8.95452 L6.25666,8.95431 C6.25022,8.95409 6.24196,8.9537 6.23212,8.95298 C6.21253,8.95156 6.1862,8.94885 6.15527,8.94362 C6.09459,8.93336 6.00993,8.91237 5.92231,8.86791 C5.83363,8.82291 5.73789,8.75168 5.66496,8.64067 C5.59111,8.52826 5.55048,8.38993 5.55048,8.22772 C5.55048,8.06553 5.59111,7.92718 5.66532,7.81486 C5.73863,7.70391 5.83487,7.63318 5.92387,7.5888 C6.01179,7.54496 6.09665,7.52468 6.15737,7.51494 C6.18834,7.50998 6.21469,7.50749 6.23429,7.50624 C6.24414,7.50561 6.25241,7.50529 6.25884,7.50513 L6.26713,7.50499 L6.27022,7.50498 C6.65653,7.50498 6.9602,7.18274 6.9602,6.80539 C6.9602,6.50204 6.90243,6.34497 6.82132,6.25888 C6.74335,6.1761 6.59284,6.1058 6.27039,6.1058 C5.92748,6.1058 5.72683,6.19005 5.60446,6.29309 C5.57004,6.32207 5.54657,6.34751 5.53255,6.36478 C5.52828,6.37005 5.52513,6.37425 5.52299,6.37724 C5.37072,6.73753 4.95846,6.91374 4.59247,6.76582 C4.22252,6.61631 4.04561,6.19442 4.19192,5.82485 C4.27087,5.6254 4.42808,5.39388 4.68076,5.18112 Z" />
        </svg>
    );
};

FieldDateIcon.displayName = `FieldDateIcon`;

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