import { Button } from '@/components/ui/button';
import { findCTA } from '@/api/client';
import { buildCTAUrl } from '@/utils/urlBuilder';

/**
 * While the trial has ended (an `app-upgrade` CTA is present), interventions can't
 * be acted on. Each detail view swaps its action buttons for this single "unlock"
 * CTA, which routes the user to upgrade. Shared so every handler stays consistent.
 *
 * Usage in a detail component:
 *   const isPaused = isAppPaused();
 *   ...
 *   {isPaused ? <UpgradeLock /> : <YourActionButtons />}
 *
 * @param {object}  props
 * @param {string} [props.size]      Button size (default 'lg'); use 'xs'/'sm' for
 *                                   compact inline spots like timeline rows.
 * @param {string} [props.label]     Button text (default 'Upgrade to unlock Flavio').
 * @param {React.ReactNode} [props.icon] Optional leading icon (e.g. a padlock).
 * @param {string} [props.className] Extra classes on the button (e.g. 'shrink-0').
 */
const UpgradeLock = ({
	size = 'lg',
	label = 'Upgrade to unlock Flavio',
	icon = null,
	className = '',
}) => {
	const upgradeCTA = findCTA('app-upgrade');
	if (!upgradeCTA) return null;

	return (
		<Button
			asChild
			size={size}
			className={`bg-magenta-500 hover:bg-magenta-600 ${className}`}
		>
			<a
				href={buildCTAUrl(upgradeCTA)}
				target="_blank"
				rel="noopener noreferrer"
				className="!text-white"
			>
				{icon}
				{label}
			</a>
		</Button>
	);
};

export default UpgradeLock;