import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { HealthActions } from './HealthActions';
import { HealthRing } from './HealthRing';
import { healthHeadline, healthLede } from './healthTexts';
import { ProblemMix } from './ProblemMix';
import { problemCount } from './ringGeometry';

export function Health( { status }: { status: Status } ): JSX.Element {
	const { counts } = status;

	return (
		<div className="panel health">
			<div className="hero">
				<HealthRing counts={ counts } />
				<div className="hero-text">
					<h1 className="display">
						{ healthHeadline( counts.broken ) }
					</h1>
					<p className="lede">{ healthLede( counts ) }</p>
					<HealthActions status={ status } />
				</div>
			</div>
			{ problemCount( counts ) > 0 && <ProblemMix counts={ counts } /> }
		</div>
	);
}