import { sprintf } from '@wordpress/i18n';

export function SaveBar( { dirty, onSaveAll, saving, i18n } ) {
	const count = Object.keys( dirty ).length;
	if ( count < 2 ) {
		return null;
	}
	const label = i18n?.unsaved
		? sprintf( i18n.unsaved, count )
		: `${ count } unsaved section(s)`;
	return (
		<div className="newsroom-settings__savebar" role="region" aria-label={ label }>
			<span>{ label }</span>
			<button type="button" className="button button-primary" disabled={ saving } onClick={ onSaveAll }>
				{ saving ? i18n?.saving : i18n?.save }
			</button>
		</div>
	);
}
