import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { X } from 'lucide-react';
import { PrimaryButton } from '@admin/components/PrimaryButton';

export function SubscribeBanner() {
	return (
		<div className="mt-6 flex items-center justify-between gap-4 rounded-r border-l-4 border-primary bg-blue-50 p-4">
			<div className="text-sm text-gray-700">
				{ createInterpolateElement(
					__(
						'Subscribe to our free email course for Google AdSense, receive our newsletter for periodic tutorials, and get <strong>2 free add-ons</strong> for Advanced Ads.',
						'advanced-ads'
					),
					{ strong: <strong /> }
				) }
			</div>
			<div className="flex shrink-0 items-center gap-3">
				<PrimaryButton>
					{ __( 'Subscribe me now', 'advanced-ads' ) }
				</PrimaryButton>
				<span className="text-gray-400">
					<X className="size-4" />
				</span>
			</div>
		</div>
	);
}