import React from 'react';
import cx from 'classnames';
import type { IconProps } from '../types';

export const SettingsAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'SettingsAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon SettingsAppIcon', className)}
        width={size}
        height={size}
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M22.0002 4C19.791 4 18.0002 5.79086 18.0002 8C18.0002 10.4923 15.3022 12.05 13.1438 10.8039C11.2306 9.69929 8.78423 10.3548 7.67966 12.268L5.67966 15.7321C4.57509 17.6452 5.23059 20.0916 7.14376 21.1962C9.30215 22.4423 9.30212 25.5577 7.14373 26.8038C5.23056 27.9084 4.57506 30.3548 5.67963 32.2679L7.67963 35.732C8.7842 37.6452 11.2306 38.3007 13.1437 37.1961C15.3021 35.95 18.0002 37.5077 18.0002 40C18.0002 42.2091 19.791 44 22.0002 44H26.0002C28.2093 44 30.0002 42.2091 30.0002 40C30.0002 37.5077 32.6982 35.95 34.8566 37.1962C36.7697 38.3007 39.2161 37.6452 40.3207 35.7321L42.3207 32.268C43.4252 30.3548 42.7697 27.9084 40.8566 26.8039C38.6982 25.5577 38.6981 22.4423 40.8565 21.1961C42.7697 20.0916 43.4252 17.6452 42.3206 15.732L40.3206 12.2679C39.2161 10.3548 36.7697 9.69926 34.8565 10.8038C32.6982 12.05 30.0002 10.4923 30.0002 8C30.0002 5.79086 28.2093 4 26.0002 4H22.0002ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
            fill="url(#SettingsAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="SettingsAppIconGradient"
                x1="5.14307"
                y1="4"
                x2="44.1337"
                y2="41.7051"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);