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

const { forwardRef } = React;

/**
 * @module SparkPostLogo
 * @description The SparkPost 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 SparkPostLogo from '@gravityforms/components/react/admin/elements/Svgs/SparkPostLogo';
 *
 * return (
 *    <SparkPostLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const SparkPostLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 100 100" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_3582_119685)">
				<rect width="91.56" height="92" x="4" y="3" fill="#F4F4F4" rx="45.78" />
				<path fill="#FA6423" d="M61.144 41.646c-3.652 2.743-4.41 7.614-4.479 10.906-5.787-6.722 10.748-26.41-8.06-38.552C60.248 29.023 32 43.84 32 65.998 32 74.71 37.443 82.325 49.431 85 61.144 82.53 67 74.71 67 65.998c-.07-12.965-8.199-17.287-5.856-24.352ZM49.43 77.866c-6.407 0-11.575-5.145-11.575-11.525 0-6.38 5.168-11.524 11.575-11.524 6.408 0 11.575 5.144 11.575 11.524 0 6.38-5.236 11.525-11.575 11.525Z" />
			</g>
			<defs>
				<filter id="filter0_d_3582_119685" width="99.56" height="100" x="0" y="0" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
					<feFlood floodOpacity="0" result="BackgroundImageFix" />
					<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="2" />
					<feColorMatrix values="0 0 0 0 0.0687866 0 0 0 0 0.097585 0 0 0 0 0.37981 0 0 0 0.0779552 0" />
					<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3582_119685" />
					<feBlend in="SourceGraphic" in2="effect1_dropShadow_3582_119685" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

SparkPostLogo.displayName = 'Svgs/SparkPostLogo';

export default SparkPostLogo;
