import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Scan } from '../api/types/status';
import { linksProgressPhrase } from '../text/countedPhrases';
import { Progress } from '../ui/Progress';

type ScanProgressBarProps = {
	scan: Scan;
	sideText: string;
};

export function ScanProgressBar( {
	scan,
	sideText,
}: ScanProgressBarProps ): JSX.Element {
	return (
		<>
			<Progress
				label={ __( 'Scan progress', 'aiplaz-link-checkup' ) }
				value={ scan.done }
				max={ scan.total }
			/>
			<div className="progress-meta num">
				<span>{ linksProgressPhrase( scan.done, scan.total ) }</span>
				<span>{ sideText }</span>
			</div>
		</>
	);
}