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

export const MoneyhubAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'MoneyhubAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon MoneyhubAppIcon', className)}
        width={size}
        height={size}
        viewBox="0 0 48 48"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M20 17C27.1797 17 33 14.7614 33 12C33 9.23858 27.1797 7 20 7C12.8203 7 7 9.23858 7 12C7 14.7614 12.8203 17 20 17Z"
            fill="url(#MoneyhubAppIconGradient)"
        />
        <path
            d="M7.12414 17.3048C10.2413 19.4888 14.8531 20.9998 19.9989 21C18.5172 22.9726 17.5106 25.3223 17.1487 27.8794C11.9548 27.4324 7.93454 25.7899 7.14225 23.7423C7.05048 23.5128 7 23.2623 7 23V18C7 17.7556 7.04386 17.5213 7.12414 17.3048Z"
            fill="url(#MoneyhubAppIconGradient)"
        />
        <path
            d="M7.12414 28.3048C9.64516 30.0711 13.1437 31.3972 17.1117 31.84C17.4378 34.5058 18.4632 36.9555 19.9989 39C13.4754 38.9998 8.0744 37.1515 7.14224 34.7422C7.05047 34.5127 7 34.2623 7 34V29C7 28.7556 7.04386 28.5213 7.12414 28.3048Z"
            fill="url(#MoneyhubAppIconGradient)"
        />
        <path
            d="M43 30C43 36.0751 38.0751 41 32 41C25.9249 41 21 36.0751 21 30C21 23.9249 25.9249 19 32 19C38.0751 19 43 23.9249 43 30Z"
            fill="url(#MoneyhubAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="MoneyhubAppIconGradient"
                x1="7"
                y1="7"
                x2="34.2667"
                y2="46.9593"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);