import React, { useId } from 'react';
import PropTypes from 'prop-types';
import Icon40PropValues from '../_defaultIconPropValues.ts';

const Settings = (props) => {
    const {
        width = Icon40PropValues.width,
        height = Icon40PropValues.height,
        stroke = Icon40PropValues.stroke,
        fill = Icon40PropValues.fill,
        ...restProps
    } = props;

    const id = useId();

    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width={width}
            height={height}
            {...restProps}
            fill="none"
        >
            <g fill={fill} stroke={stroke} strokeWidth={0.2} clipPath={`url(#${id})`}>
                <path d="M11.35 22.975a1.71 1.71 0 0 1-1.69-1.495l-.21-1.7a.25.25 0 0 0-.155-.195 9 9 0 0 1-.825-.345.24.24 0 0 0-.24.035l-1.345 1.05c-.68.53-1.655.47-2.26-.145l-.835-.835a1.7 1.7 0 0
                1-.14-2.275l1.045-1.34a.25.25 0 0 0 .03-.25c-.125-.26-.24-.54-.34-.825a.26.26 0 0 0-.195-.15l-1.695-.21c-.86-.11-1.5-.84-1.495-1.705v-1.195a1.703 1.703 0 0 1
                1.495-1.7l1.7-.21c.085-.01.16-.07.195-.155a9 9 0 0 1 .34-.825.24.24 0 0 0-.035-.24L3.645 6.92c-.53-.68-.47-1.655.145-2.26l.835-.835a1.707 1.707 0 0 1 2.275-.14L8.24
                4.73c.07.055.165.065.25.03.26-.125.54-.24.825-.34a.26.26 0 0 0 .15-.195l.21-1.695a1.71 1.71 0 0 1 1.695-1.495h1.225c.855 0 1.58.64 1.69 1.495l.21
                1.7c.01.085.07.16.155.195.275.095.555.215.825.34.07.035.17.025.24-.035l1.345-1.05c.68-.53 1.655-.47 2.26.145l.835.835a1.7 1.7 0 0 1 .14 2.265L19.25 8.27a.25.25 0 0
                0-.03.25c.125.26.24.545.34.825.03.075.105.135.195.15l1.695.21c.86.11 1.5.84 1.495 1.705v1.19c.01.865-.635 1.6-1.495 1.71l-1.7.21a.24.24 0 0 0-.195.16c-.095.27-.21.555-.34.825a.23.23 0 0 0
                .035.24l1.05 1.345c.53.68.47 1.655-.145 2.26l-.835.835a1.7 1.7 0 0 1-2.275.14l-1.34-1.045a.25.25 0 0 0-.25-.03c-.26.125-.54.24-.825.34a.26.26 0 0 0-.15.195l-.21 1.695a1.71 1.71 0 0 1-1.695
                1.495H11.35Zm-2.975-5.21c.24 0 .485.05.71.155q.353.166.705.295A1.72 1.72 0 0 1 10.9 19.6l.21 1.7c.015.12.12.21.24.21h1.21c.13 0 .23-.09.25-.215l.21-1.695a1.7 1.7 0 0 1 1.1-1.385q.368-.134.705-.29a1.7
                1.7 0 0 1 1.77.2l1.345 1.05c.1.08.24.07.33-.015l.845-.845c.09-.09.1-.23.025-.325l-1.05-1.345a1.71 1.71 0 0 1-.205-1.76c.11-.235.21-.47.29-.705a1.71 1.71 0 0 1 1.385-1.11l1.7-.21a.24.24 0 0 0
                .21-.245v-1.21c0-.13-.09-.235-.215-.25l-1.695-.21a1.7 1.7 0 0 1-1.385-1.1 7 7 0 0 0-.29-.705c-.27-.59-.19-1.265.2-1.77l1.05-1.345a.24.24 0 0 0-.02-.325l-.845-.845a.246.246 0 0 0-.325-.025L16.6
                5.88c-.505.39-1.18.47-1.76.205q-.352-.166-.705-.295a1.71 1.71 0 0 1-1.11-1.385l-.21-1.7a.25.25 0 0 0-.245-.21h-1.215a.24.24 0 0 0-.245.215l-.21 1.695A1.7 1.7 0 0 1 9.8
                5.79c-.245.085-.48.185-.705.29-.59.27-1.265.19-1.77-.2L5.98 4.83a.246.246 0 0 0-.33.02l-.845.845c-.09.09-.1.23-.025.325l1.05 1.345c.39.505.47 1.18.205 1.76q-.166.353-.295.705a1.71 1.71 0 0 1-1.385
                1.11l-1.7.21a.244.244 0 0 0-.21.245V12.6c0 .13.09.235.215.25l1.695.21a1.7 1.7 0 0 1 1.385 1.1q.134.367.29.705c.27.59.19 1.265-.2 1.77L4.78
                17.98c-.08.1-.07.24.02.33l.845.845c.09.09.23.1.325.025l1.345-1.05c.305-.24.675-.36 1.045-.36z"
                />
                <path d="M11.97 17.12A5.123 5.123 0 0 1 6.85 12c0-2.825 2.3-5.12 5.12-5.12s5.12 2.3 5.12 5.12-2.295 5.12-5.12 5.12Zm0-8.78A3.665 3.665 0 0 0 8.31 12c0 2.02 1.64 3.66 3.66 3.66s3.66-1.64
                3.66-3.66-1.64-3.66-3.66-3.66Z"
                />
            </g>
            <defs>
                <clipPath id={id}>
                    <path fill="#fff" d="M0 0h24v24H0z" />
                </clipPath>
            </defs>
        </svg>
    );
};

Settings.propTypes = {
    width: PropTypes.string,
    height: PropTypes.string,
    fill: PropTypes.string,
    stroke: PropTypes.string,
};
export default Settings;