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

export const AbacusAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'AbacusAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon', 'AppIcon', 'AbacusAppIcon', 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="M14.5556 7C10.3827 7 7 10.3827 7 14.5556V33.4444C7 37.6173 10.3827 41 14.5556 41H33.4444C37.6173 41 41 37.6173 41 33.4444V14.5556C41 10.3827 37.6173 7 33.4444 7H14.5556ZM27.7778 11.7222C26.7346 11.7222 25.8889 12.5679 25.8889 13.6111V19.2778C25.8889 20.321 26.7346 21.1667 27.7778 21.1667C28.821 21.1667 29.6667 20.321 29.6667 19.2778V13.6111C29.6667 12.5679 28.821 11.7222 27.7778 11.7222ZM12.6667 18.3333C11.6235 18.3333 10.7778 17.4877 10.7778 16.4444C10.7778 15.4012 11.6235 14.5556 12.6667 14.5556L18.3334 14.5556C19.3766 14.5556 20.2222 15.4012 20.2222 16.4444C20.2222 17.4877 19.3766 18.3333 18.3334 18.3333H12.6667ZM22.1111 33.4444C21.0679 33.4444 20.2222 32.5988 20.2222 31.5556C20.2222 30.5124 21.0679 29.6667 22.1111 29.6667H35.3334C36.3766 29.6667 37.2222 30.5124 37.2222 31.5556C37.2222 32.5988 36.3766 33.4444 35.3334 33.4444H22.1111ZM10.7778 28.7222C10.7778 27.679 11.6235 26.8333 12.6667 26.8333C13.7099 26.8333 14.5556 27.679 14.5556 28.7222V34.3889C14.5556 35.4321 13.7099 36.2778 12.6667 36.2778C11.6235 36.2778 10.7778 35.4321 10.7778 34.3889V28.7222ZM35.3334 11.7222C34.2902 11.7222 33.4445 12.5679 33.4445 13.6111V19.2778C33.4445 20.321 34.2902 21.1667 35.3334 21.1667C36.3766 21.1667 37.2222 20.321 37.2222 19.2778V13.6111C37.2222 12.5679 36.3766 11.7222 35.3334 11.7222Z"
            fill="url(#AbacusAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="AbacusAppIconGradient"
                x1="7"
                y1="7"
                x2="34.801"
                y2="45.4788"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);