/**
 * External Dependencies
 */
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';
import { PrimaryButton } from '@admin/components/PrimaryButton';

export function WizardFooter( {
	step,
	totalSteps,
	onBack,
	onSkip,
	onNext,
	nextLabel,
	nextDisabled = false,
} ) {
	return (
		<footer className="sticky bottom-0 z-20 flex flex-none items-center gap-3 border-t border-border bg-white px-8 py-3.5">
			<button
				type="button"
				onClick={ onBack }
				disabled={ step === 0 }
				className={ clsx(
					'rounded-md border border-border bg-white px-4 py-2 text-[13.5px] text-gray-700',
					step === 0
						? 'cursor-not-allowed opacity-45'
						: 'cursor-pointer'
				) }
			>
				{ __( 'Back', 'advanced-ads' ) }
			</button>
			<span className="ml-1 text-[12.5px] text-gray-400">
				{ sprintf(
					/* translators: 1: current step number, 2: total steps. */
					__( 'Step %1$d of %2$d', 'advanced-ads' ),
					step + 1,
					totalSteps
				) }
			</span>
			<div className="ml-auto flex items-center gap-2.5">
				<button
					type="button"
					onClick={ onSkip }
					className="cursor-pointer border-0 bg-transparent px-3.5 py-2 text-[13px] text-gray-500"
				>
					{ __( 'Skip Now', 'advanced-ads' ) }
				</button>
				<PrimaryButton onClick={ onNext } disabled={ nextDisabled }>
					{ nextLabel }
				</PrimaryButton>
			</div>
		</footer>
	);
}