/**
 * External dependencies
 */
import React from 'react';
import tracker from '../../../js/utils/tracker';

/**
 * WordPress dependencies
 */
const {__} = wp.i18n;

export default ({smushData}) => {

	return (
		<React.Fragment>
			<div className="sui-box-header">
				<h3 className="sui-box-title">
					{__('Next-Gen Formats', 'wp-smushit')}
				</h3>
			</div>
			<div className="sui-box-body">
				<div className="sui-message">
					<img
						className="sui-image"
						src={smushData.urls.freeImg}
						srcSet={smushData.urls.freeImg2x + ' 2x'}
						alt={__('Smush WebP', 'wp-smushit')}
					/>

					<div className="sui-message-content">
						<p>
							{__(
								'Fix the "Serve images in next-gen format" Google PageSpeed recommendation with a single click! Serve WebP and AVIF images directly from your server to supported browsers, while seamlessly switching to original images for those without WebP or AVIF support. All without relying on a CDN or any server configuration.',
								'wp-smushit'
							)}
						</p>

						<ol className="sui-upsell-list">
							<li>
								<span
									className="sui-icon-check sui-sm"
									aria-hidden="true"
								/>
								{__(
									'Activate the Next-Gen Formats feature with a single click; no server configuration required.',
									'wp-smushit'
								)}
							</li>
							<li>
								<span
									className="sui-icon-check sui-sm"
									aria-hidden="true"
								/>
								{__(
									'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
									'wp-smushit'
								)}
							</li>
							<li>
								<span
									className="sui-icon-check sui-sm"
									aria-hidden="true"
								/>
								{__(
									'Serve WebP and AVIF version of images in the browsers that support it and fall back to JPEGs and PNGs for unsupported browsers.',
									'wp-smushit'
								)}
							</li>
						</ol>

						<p className="sui-margin-top">
							<a
								href={smushData.urls.upsell}
								className="sui-button sui-button-purple"
								style={{marginRight: '30px'}}
								target="_blank"
								rel="noreferrer"
								onClick={ () => {
									tracker.track( 'local_webp_upsell', {
										Location: 'local_webp_page',
									} );
								} }
							>
								{__( 'UNLOCK NEXT-GEN FORMATS WITH PRO', 'wp-smushit')}
							</a>
						</p>
					</div>
				</div>
			</div>
		</React.Fragment>
	);
};