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

const { forwardRef } = React;

/**
 * @module GravitySMTPLogo
 * @description The Gravity SMTP logo.
 *
 * @since 3.6.6
 *
 * @param {object}      props        Component props.
 * @param {string}      props.fill   The fill color.
 * @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 GravitySMTPLogo from '@gravityforms/components/react/admin/elements/Svgs/GravitySMTPLogo';
 *
 * return (
 *    <GravitySMTPLogo height={ 30 } width={ 29 } />
 * );
 *
 */
const GravitySMTPLogo = forwardRef( ( {
	fill = '#ffffff',
	height = 29,
	title = '',
	width = 30,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 30 29" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fill={ fill } d="M29.842 21.311 19.39.82C19.123.368 18.465 0 17.933 0h-5.866c-.532 0-1.188.37-1.46.82L.152 21.31c-.27.452-.12 1.05-.01 1.648l.877 4.6c.12.535.915.828 1.45.828l12.513.03h.03l12.517-.03c.534 0 1.336-.293 1.45-.828l.876-4.6c.12-.545.26-1.196-.01-1.648h-.003Zm-6.537 1.882-4.92-1.476c-.702-.229-1.18-.385-1.421-.86l-1.422-3.94c-.12-.234-.277-.345-.437-.345h-.013c-.002 0-.01-.003-.015 0-.157.002-.314.113-.435.348l-1.421 3.94c-.242.474-.715.61-1.422.86l-4.922 1.476c-.54 0-.759-.374-.489-.833L14.383 6.37c.313-.653 1.04-.714 1.421 0L23.8 22.363c.27.457.051.833-.489.833l-.005-.003Z" />
		</svg>
	);
} );

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

GravitySMTPLogo.displayName = 'Svgs/GravitySMTPLogo';

export default GravitySMTPLogo;
