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

const { forwardRef } = React;

/**
 * @module CustomSMTP
 * @description The CustomSMTP 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 CustomSMTP from '@gravityforms/components/react/admin/elements/Svgs/CustomSMTP';
 *
 * return (
 *    <CustomSMTP height={ 44 } width={ 44 } />
 * );
 *
 */
const CustomSMTP = 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 44 44" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<rect width="44" height="44" fill="#FF4F00" rx="22" />
			<path fill="#fff" d="M24.397 31.338c-.149.358-.41.582-.782.672a.962.962 0 0 1-.962-.269l-3.174-3.176a1.022 1.022 0 0 1-.29-.627.959.959 0 0 1 .178-.693l4.069-6.71-6.684 4.138c-.209.12-.436.167-.681.145a1.003 1.003 0 0 1-.638-.302L12.26 21.34a.964.964 0 0 1-.27-.962c.09-.373.314-.634.672-.783l17.414-7.09c.447-.15.835-.06 1.162.268.328.328.41.708.246 1.14l-7.086 17.425Z" />
		</svg>
	);
} );

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

CustomSMTP.displayName = 'Svgs/CustomSMTP';

export default CustomSMTP;
