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

export const AxisIcon = ({color}) => {
    const stylesVariables = useStylesVariables();

    return (
        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" style={{display: `block`}}>
            <path fill={color || stylesVariables.axisControlColor} fillRule="evenodd" d="M20.5857864,18.9926407 L19.0502525,17.4571068 C18.6597282,17.0665825 18.6597282,16.4334175 19.0502525,16.0428932 C19.4407768,15.6523689 20.0739418,15.6523689 20.4644661,16.0428932 L23.6293644,19.2077915 C23.860985,19.390939 24.0096118,19.674433 24.0096118,19.9926407 C24.0096118,20.3108484 23.860985,20.5943424 23.6293644,20.7774899 L20.4644661,23.9423882 C20.0739418,24.3329124 19.4407768,24.3329124 19.0502525,23.9423882 C18.6597282,23.5518639 18.6597282,22.9186989 19.0502525,22.5281746 L20.5857864,20.9926407 L10,20.9926407 L10,21 L7.5,21 C5.56010482,21 4,19.4357348 4,17.5 L4,15 L4,4.41421356 L2.46446609,5.94974747 C2.0739418,6.34027176 1.44077682,6.34027176 1.05025253,5.94974747 C0.65972824,5.55922318 0.65972824,4.9260582 1.05025253,4.53553391 L4.21515079,1.37063565 C4.3982983,1.13901495 4.68179233,0.990388169 5,0.990388169 C5.31820767,0.990388169 5.6017017,1.13901495 5.78484921,1.37063565 L8.94974747,4.53553391 C9.34027176,4.9260582 9.34027176,5.55922318 8.94974747,5.94974747 C8.55922318,6.34027176 7.9260582,6.34027176 7.53553391,5.94974747 L6,4.41421356 L6,15 L6,17.5 C6,18.3323559 6.66586843,19 7.5,19 L9.87806505,19 C9.91803043,18.9951415 9.95872316,18.9926407 10,18.9926407 L20.5857864,18.9926407 L20.5857864,18.9926407 Z" />
        </svg>
    );
};

AxisIcon.displayName = `AxisIcon`;

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