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

export const SettingsIcon = ({color}) => {
    const {iconColorDefault} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" style={{display: `block`}}>
            <path fill={color || iconColorDefault} d="M7.36395 2C6.81166 2 6.36395 2.44772 6.36395 3V4.38007C6.12358 4.48886 5.89598 4.62088 5.684 4.77327L4.48833 4.08295C4.01004 3.80681 3.39845 3.97068 3.1223 4.44898L2.48594 5.55119C2.2098 6.02948 2.37367 6.64107 2.85197 6.91722L4.04748 7.60744C4.03481 7.73658 4.02832 7.86753 4.02832 8C4.02832 8.13248 4.03481 8.26344 4.04748 8.39258L2.85173 9.08295C2.37344 9.35909 2.20956 9.97068 2.4857 10.449L3.12207 11.5512C3.39821 12.0295 4.0098 12.1934 4.48809 11.9172L5.68403 11.2267C5.896 11.3791 6.12359 11.5111 6.36395 11.6199V13C6.36395 13.5523 6.81166 14 7.36395 14H8.63667C9.18896 14 9.63667 13.5523 9.63667 13V11.6194C9.87673 11.5106 10.104 11.3787 10.3158 11.2264L11.5122 11.9172C11.9905 12.1934 12.6021 12.0295 12.8782 11.5512L13.5146 10.449C13.7908 9.97068 13.6269 9.35909 13.1486 9.08295L11.952 8.39208C11.9646 8.2631 11.9711 8.1323 11.9711 8C11.9711 7.86771 11.9646 7.73692 11.952 7.60795L13.1483 6.91722C13.6266 6.64107 13.7905 6.02948 13.5144 5.55119L12.878 4.44898C12.6019 3.97068 11.9903 3.80681 11.512 4.08295L10.3158 4.77357C10.1041 4.62131 9.87674 4.48938 9.63667 4.38063V3C9.63667 2.44772 9.18896 2 8.63667 2H7.36395ZM9.99609 8C9.99609 9.10241 9.10241 9.99609 8 9.99609C6.89759 9.99609 6.00391 9.10241 6.00391 8C6.00391 6.89759 6.89759 6.00391 8 6.00391C9.10241 6.00391 9.99609 6.89759 9.99609 8Z" />
        </svg>
    );
};

SettingsIcon.displayName = `SettingsIcon`;

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