import type { JSX } from 'react';
import { progressPercent } from '../ui/Progress';

type ResponseMeterProps = {
	responseMilliseconds: number;
	pauseAtMilliseconds: number;
};

export function ResponseMeter( {
	responseMilliseconds,
	pauseAtMilliseconds,
}: ResponseMeterProps ): JSX.Element {
	const percent = progressPercent(
		responseMilliseconds,
		pauseAtMilliseconds
	);

	return (
		<div className="meter" aria-hidden="true">
			<span style={ { width: `${ String( percent ) }%` } } />
		</div>
	);
}