import React from 'react';
import PropTypes from 'prop-types';

export function PackageChange({
	changePackageUrl,
	currentPackage,
	packageDescription,
}) {
	return (
		<div className="ncf__package-change">
			<div className="ncf__package-change__package o3-type-body-lg">
				<div className="ncf__package-change__content">
					<p>
						You have chosen{' '}
						<span className="ncf__strong">{currentPackage}</span>
					</p>
					{packageDescription && (
						<p className="o3-type-body-base">{packageDescription}</p>
					)}
				</div>
				<div className="ncf__package-change__actions">
					<a
						href={changePackageUrl}
						className="ncf__button o3-button o3-button--secondary ncf__button--baseline"
						data-trackable="change"
						data-o3-theme="mono"
					>
						Change
					</a>
				</div>
			</div>
		</div>
	);
}

PackageChange.propTypes = {
	changePackageUrl: PropTypes.string.isRequired,
	currentPackage: PropTypes.string.isRequired,
	packageDescription: PropTypes.string,
};