import type { ReactNode } from 'react';
import type { AdminData } from '../types';
import { __ } from "@wordpress/i18n";
interface Props {
  title: string;
  children: ReactNode;
  actionLabel?: string;
}
export function ContextualUpsell({
  title,
  children,
  actionLabel = __('Unlock Pro', 'stockbeacon-product-waitlists-for-woocommerce')
}: Props) {
  const adminData: Partial<AdminData> = window.stockbeaconAdmin ?? {};
  const href = adminData.upgradeUrl || '#';
  return <div className="stockbeacon-contextual-upsell">
			<div>
				<span className="stockbeacon-pro-badge">{__("PRO", "stockbeacon-product-waitlists-for-woocommerce")}</span>
				<strong>{title}</strong>
				<p>{children}</p>
			</div>
			<a href={href}>
				{actionLabel}
			</a>
		</div>;
}
