import { Lock } from 'lucide-react';
import { __ } from '@wordpress/i18n';
import { PrimaryButton } from './PrimaryButton';

export function ProBanner( { text, cta, upgradeUrl } ) {
	return (
		<div className="mt-4 flex items-center justify-between gap-4 rounded border border-primary bg-blue-50 px-4 py-3">
			<div className="flex items-center gap-2 text-sm text-gray-700">
				<Lock className="size-4 shrink-0 text-primary" />
				{ text ?? __( 'This is a Pro feature.', 'advanced-ads' ) }
			</div>
			<PrimaryButton href={ upgradeUrl } target="_blank">
				{ cta ?? __( 'Upgrade to Pro', 'advanced-ads' ) }
			</PrimaryButton>
		</div>
	);
}