interface ToastProps {
	message: string;
	visible: boolean;
}

/**
 * The brief confirmation toast. Same element shape and `#toast` id the CSS
 * targets; React owns the text and the `show` class.
 * @param root0
 * @param root0.message
 * @param root0.visible
 */
export const Toast = ( { message, visible }: ToastProps ) => (
	<div
		className={ visible ? 'toast show' : 'toast' }
		id="toast"
		role="status"
		aria-live="polite"
	>
		{ message }
	</div>
);
