import React from 'react';
import { Verdict } from './ui';

/**
 * The sentence a screen owes its reader before its controls.
 *
 * Nineteen of the twenty-one settings screens opened straight into fields.
 * That asks the reader to work out the state of the thing from the state of
 * the switches, which is the job the screen should be doing for them: is this
 * on, is it working, and what is the one thing to press.
 *
 * Every screen builds its own sentence from facts it already loaded — this
 * component only gives them one shape, so the answer is in the same place on
 * every screen. A verdict with nothing real to say is not rendered at all; a
 * generic "welcome to the sitemap screen" is worse than silence.
 *
 * @param {object}   props
 * @param {string}   props.tone   good | warning | bad | neutral
 * @param {string}   props.text   The state, in one sentence.
 * @param {string}   [props.why]  Why it matters, or what happens next.
 * @param {string}   [props.action]   Label of the one control that resolves it.
 * @param {Function} [props.onAction] What that control does.
 * @param {boolean}  [props.busy]     The control is doing it right now.
 */
export default function ScreenVerdict({ tone = 'neutral', text, why, action, onAction, busy = false, children }) {
	if (!text) return null;
	return (
		<Verdict tone={tone} text={text} why={why} action={action} onAction={onAction} busy={busy}>
			{children}
		</Verdict>
	);
}