import { PreviewFields } from './PreviewFields';
import { UpsellModal } from './UpsellModal';

/**
 * Blurred, disabled preview of the tab's real future fields, with the sales pitch surfacing as a dialog on top, permanently — there's no close button and no dismiss gesture, so switching to another tab is the only way past it. The overlay is `position: absolute` against this component's own wrapper, so it's confined to the settings content area — the header and sidebar nav stay visible and untouched.
 *
 * @param {Object}   props
 * @param {string}   props.tabLabel       Short tab name (e.g. "Pro") — the dialog's accessible label.
 * @param {string}   props.title          Short pitch headline for the feature card.
 * @param {string}   [props.subtitle]     Optional muted subheading under the title.
 * @param {string[]} props.features       Feature bullets for the add-on-specific card.
 * @param {string}   props.ctaUrl         Add-on's own "See all features and pricing" link.
 * @param {string}   [props.allAccessUrl] If set, the dialog also shows the shared All Access card.
 * @param {Array}    props.previewGroups  Field groups for PreviewFields (see that component).
 */
export function UpsellPage( {
	tabLabel,
	title,
	subtitle,
	features,
	ctaUrl,
	allAccessUrl,
	previewGroups,
} ) {
	return (
		<div className="relative">
			<PreviewFields groups={ previewGroups } />
			<div className="absolute inset-0 z-30 flex items-center justify-center p-6 backdrop-blur-[1px]">
				<UpsellModal
					modalTitle={ tabLabel }
					pitchTitle={ title }
					pitchSubtitle={ subtitle }
					features={ features }
					ctaUrl={ ctaUrl }
					allAccessUrl={ allAccessUrl }
				/>
			</div>
		</div>
	);
}