type ABConversionBarProps = {
	conversionsA: number;
	conversionsB: number;
};

export default function ABConversionBar( props: ABConversionBarProps ) {
	const conversionsA = props.conversionsA ?? 0;
	const conversionsB = props.conversionsB ?? 0;

	const totalConversions = conversionsA + conversionsB;

	const hasData = conversionsA > 0 || conversionsB > 0;

	const percentageA =
		totalConversions > 0
			? `${ Math.round( ( conversionsA / totalConversions ) * 100 ) } %`
			: '0 %';
	const percentageB =
		totalConversions > 0
			? `${ Math.round( ( conversionsB / totalConversions ) * 100 ) } %`
			: '0 %';

	const ratio = conversionsA / totalConversions;

	// Round to nearest integer if you want an integer‐percent bar:
	const fillWidth = Math.round( ratio * 100 );

	return (
		<div className="gs-ab-conversion-bar">
			{ hasData ? (
				<div className="gs-ab-conversion-bar__graph">
					<div className="gs-ab-conversion-bar__variation">
						<span className="gs-ab-conversion-bar__variation-name">
							A
						</span>
						<span className="gs-ab-conversion-bar__variation-percentage">
							{ percentageA }
						</span>
					</div>
					<div className="gs-ab-conversion-bar__bar">
						<span
							style={ { width: `${ fillWidth }%` } }
							className="gs-ab-conversion-bar__bar-fill"
						></span>
					</div>
					<div className="gs-ab-conversion-bar__variation">
						<span className="gs-ab-conversion-bar__variation-name">
							B
						</span>
						<span className="gs-ab-conversion-bar__variation-percentage">
							{ percentageB }
						</span>
					</div>
				</div>
			) : (
				<div className="gs-ab-conversion-bar__none">
					{ /* {__('No conversions available')} */ }–
				</div>
			) }
		</div>
	);
}