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

export const SolfegeAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'SolfegeAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon SolfegeAppIcon', className)}
        width={size}
        height={size}
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M11 7C8.79086 7 7 8.79086 7 11V19C7 21.2091 8.79086 23 11 23H17C19.2091 23 21 21.2091 21 19V11C21 8.79086 19.2091 7 17 7H11Z"
            fill="url(#SolfegeAppIconGradient)"
        />
        <path
            d="M11 27C8.79086 27 7 28.7909 7 31V37C7 39.2091 8.79086 41 11 41H17C19.2091 41 21 39.2091 21 37V31C21 28.7909 19.2091 27 17 27H11Z"
            fill="url(#SolfegeAppIconGradient)"
        />
        <path
            d="M25 25C25 22.7909 26.7909 21 29 21H37C39.2091 21 41 22.7909 41 25V37C41 39.2091 39.2091 41 37 41H29C26.7909 41 25 39.2091 25 37V25Z"
            fill="url(#SolfegeAppIconGradient)"
        />
        <path
            d="M29 7C26.7909 7 25 8.79086 25 11V13C25 15.2091 26.7909 17 29 17H37C39.2091 17 41 15.2091 41 13V11C41 8.79086 39.2091 7 37 7H29Z"
            fill="url(#SolfegeAppIconGradient)"
        />

        <defs>
            <linearGradient
                id="SolfegeAppIconGradient"
                x1="0"
                y1="0"
                x2="27.801"
                y2="38.4788"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);