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

export const HelpCenterAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'HelpCenterAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon HelpCenterAppIcon', className)}
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        fill="none"
        viewBox="0 0 48 48"
    >
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M6 22.6472C6 12.9009 14.0589 5 24 5C33.9411 5 42 12.9009 42 22.6472C42 31.3778 35.5333 38.6276 27.0397 40.0438L25.4842 42.1789C24.7294 43.2149 23.1833 43.2819 22.3382 42.3153L20.233 39.9074C12.1003 38.2096 6 31.1268 6 22.6472ZM24 34.9216C25.1046 34.9216 26 34.0437 26 32.9608C26 31.8779 25.1046 31 24 31C22.8954 31 22 31.8779 22 32.9608C22 34.0437 22.8954 34.9216 24 34.9216ZM24.5 15.2942C23.8336 15.2942 22.9438 15.6862 22.3938 16.2103C21.6016 16.9649 20.3354 16.9471 19.5656 16.1704C18.7959 15.3938 18.8141 14.1524 19.6062 13.3977C20.7538 12.3045 22.6018 11.3726 24.5 11.3726C28.2102 11.3726 31 14.1418 31 17.7452C31 20.1143 29.6038 21.8232 27.8282 22.7421C27.2285 23.0525 26.7277 23.4127 26.3992 23.7786C26.0826 24.1314 26 24.3998 26 24.608L26 26C26 27.0829 25.1046 27.9608 24 27.9608C22.8954 27.9608 22 27.0829 22 26L22 24.608C22 21.7936 24.4033 20.0802 25.9608 19.2741C26.6783 18.9028 27 18.3989 27 17.7452C27 16.295 25.9882 15.2942 24.5 15.2942Z"
            fill="url(#HelpCenterAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="HelpCenterAppIconGradient"
                x1="6"
                y1="5"
                x2="37.5617"
                y2="46.3848"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);