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

export const ContentAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'ContentAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon ContentAppIcon', className)}
        width={size}
        height={size}
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M7.00002 12C7.00002 9.79086 8.79088 8 11 8H26C28.2092 8 30 9.79086 30 12H37C39.2092 12 41 13.7909 41 16H7.00002V12Z"
            fill="url(#ContentAppIconGradient)"
        />
        <path
            d="M5.08174 24.8677C4.52662 22.3697 6.4275 20 8.98649 20H39.0136C41.5725 20 43.4734 22.3697 42.9183 24.8677L40.6961 34.8677C40.2894 36.6979 38.6661 38 36.7913 38H11.2087C9.33392 38 7.71066 36.6979 7.30396 34.8677L5.08174 24.8677Z"
            fill="url(#ContentAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="ContentAppIconGradient"
                x1="4.98486"
                y1="8"
                x2="33.2643"
                y2="44.7684"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);