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

export const PodcastsAppIcon: React.FC<IconProps> = ({
    className,
    testId = 'PodcastsAppIcon',
    size,
}) => (
    <svg
        data-testid={testId}
        className={cx('Icon AppIcon PodcastsAppIcon', className)}
        width={size}
        height={size}
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M24 4C18.4772 4 14 8.47715 14 14V22C14 27.5228 18.4772 32 24 32C27.9779 32 31.4133 29.6774 33.024 26.3143C33.5702 25.1739 32.6176 24 31.3532 24H28C26.8954 24 26 23.1046 26 22C26 20.8954 26.8954 20 28 20H32C33.1046 20 34 19.1046 34 18C34 16.8954 33.1046 16 32 16H28C26.8954 16 26 15.1046 26 14C26 12.8954 26.8954 12 28 12H31.3532C32.6176 12 33.5702 10.8261 33.024 9.6857C31.4133 6.32262 27.9779 4 24 4Z"
            fill="url(#PodcastsAppIconGradient)"
        />
        <path
            d="M7 18C8.10457 18 9 18.8954 9 20C9 28.9458 15.8219 36 24 36C32.1781 36 39 28.9458 39 20C39 18.8954 39.8954 18 41 18C42.1046 18 43 18.8954 43 20C43 30.2388 35.6371 38.836 26 39.8912V42C26 43.1046 25.1046 44 24 44C22.8954 44 22 43.1046 22 42V39.8912C12.3629 38.836 5 30.2388 5 20C5 18.8954 5.89543 18 7 18Z"
            fill="url(#PodcastsAppIconGradient)"
        />
        <defs>
            <linearGradient
                id="PodcastsAppIconGradient"
                x1="5"
                y1="4"
                x2="43.9993"
                y2="41.9994"
                gradientUnits="userSpaceOnUse"
            >
                <stop stopColor="var(--app-icon-gradient-color-0)" />
                <stop offset="1" stopColor="var(--app-icon-gradient-color-1)" />
            </linearGradient>
        </defs>
    </svg>
);