import type { JSX } from 'react';
import type { Fix } from '../../shared/api/types/fixes';
import { Icon } from '../../shared/ui/Icon';
import { fixStateLabel } from './historyTexts';

export function FixStatePill( { fix }: { fix: Fix } ): JSX.Element {
	if ( fix.state === 'done' ) {
		return (
			<span className="pill pill-ok">
				<Icon name="check" />
				{ fixStateLabel( fix ) }
			</span>
		);
	}

	return <span className="pill pill-idle">{ fixStateLabel( fix ) }</span>;
}