import { React, PropTypes } from '@gravityforms/libraries';

const { forwardRef } = React;

/**
 * @module TelegramLogo
 * @description The Telegram logo.
 *
 * @since 2.3.1
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the logo.
 * @param {string}      props.title  The title of the logo.
 * @param {number}      props.width  The width of the logo.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import TelegramLogo from '@gravityforms/components/react/admin/elements/Svgs/TelegramLogo';
 *
 * return (
 *    <TelegramLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const TelegramLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 92 92" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<rect width="92" height="92" fill="url(#paint0_linear_3910_125727)" rx="46" />
			<path fill="#fff" d="M17.132 48.25c5.377-2.962 11.38-5.434 16.988-7.919 9.649-4.07 19.336-8.069 29.121-11.792 1.904-.635 5.325-1.255 5.66 1.566-.184 3.994-.94 7.964-1.457 11.934-1.316 8.731-2.836 17.432-4.319 26.134-.51 2.898-4.142 4.4-6.465 2.544-5.583-3.772-11.21-7.506-16.722-11.365-1.806-1.835-.132-4.47 1.48-5.78 4.6-4.533 9.477-8.383 13.835-13.15 1.176-2.838-2.298-.446-3.444.288-6.295 4.338-12.437 8.942-19.075 12.755-3.39 1.866-7.342.271-10.731-.77-3.04-1.259-7.492-2.526-4.872-4.444Z" />
			<defs>
				<linearGradient id="paint0_linear_3910_125727" x1="61.337" x2="38.337" y1="15.336" y2="69" gradientUnits="userSpaceOnUse">
					<stop stopColor="#37AEE2" />
					<stop offset="1" stopColor="#1E96C8" />
				</linearGradient>
			</defs>
		</svg>
	);
} );

TelegramLogo.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

TelegramLogo.displayName = 'Svgs/TelegramLogo';

export default TelegramLogo;
