import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Spinner } from './Spinner';

type RecheckOutcomeProps = {
	isChecking: boolean;
	error: Error | null;
	outcomeText: string;
};

export function RecheckOutcome( {
	isChecking,
	error,
	outcomeText,
}: RecheckOutcomeProps ): JSX.Element {
	return (
		<span className="muted recheck-out" aria-live="polite">
			{ isChecking ? (
				<>
					<Spinner />
					{ __( 'Checking again', 'aiplaz-link-checkup' ) }
				</>
			) : (
				( error?.message ?? outcomeText )
			) }
		</span>
	);
}