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

const { forwardRef } = React;

/**
 * @module BrevoLogo
 * @description The Brevo 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 BrevoLogo from '@gravityforms/components/react/admin/elements/Svgs/BrevoLogo';
 *
 * return (
 *    <BrevoLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const BrevoLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 100 100" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_4669_137863)">
				<rect x="4" y="3" width="91.56" height="92" rx="45.78" fill="#0B996E" />
				<path d="M37.5328 49.0201V28.3003H49.9191C54.1027 28.3003 56.8661 30.7622 56.8661 34.4978C56.8661 38.742 53.2681 41.9689 45.9036 44.4306C40.8818 46.0424 38.6234 47.4014 37.7853 49.0165L37.5328 49.0201ZM37.5328 69.8217V61.1624C37.5328 57.3414 40.7135 53.6058 45.1497 52.1615C49.0844 50.8025 52.3458 49.4435 55.1093 48.0026C58.7914 50.212 61.0499 54.0292 61.0499 58.021C61.0499 64.8125 54.6884 69.8217 46.0685 69.8217H37.5328ZM30 77.122H46.7383C59.4612 77.122 69 69.0568 69 58.3589C69 52.4994 66.0717 47.2377 60.8815 43.8401C63.5607 41.1221 64.8162 37.9807 64.8162 34.1597C64.8162 26.2653 59.2088 21 50.7572 21H30V77.122Z" fill="white" />
			</g>
			<defs>
				<filter id="filter0_d_4669_137863" x="0" y="0" width="99.5601" height="100" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
					<feFlood floodOpacity="0" result="BackgroundImageFix" />
					<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="2" />
					<feColorMatrix type="matrix" 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 mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4669_137863" />
					<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4669_137863" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

BrevoLogo.displayName = 'Svgs/BrevoLogo';

export default BrevoLogo;
