export function GroupNav( { groups, active, onSelect, soonLabel } ) {
	return (
		<nav className="newsroom-settings__nav" aria-label="Settings groups">
			{ groups.map( ( group ) => {
				const isSoon = !! group.comingSoon;
				const isActive = active === group.id;
				return (
					<button
						key={ group.id }
						type="button"
						className={ `newsroom-settings__nav-btn${ isActive ? ' is-active' : '' }${ isSoon ? ' is-soon' : '' }` }
						onClick={ () => onSelect( group.id ) }
						aria-current={ isActive ? 'page' : undefined }
					>
						<span className="newsroom-settings__nav-icon" aria-hidden="true">{ group.icon }</span>
						<span className="newsroom-settings__nav-text">
							<span className="newsroom-settings__nav-label">{ group.title }</span>
							{ isSoon && (
								<span className="newsroom-settings__nav-badge">{ soonLabel }</span>
							) }
						</span>
					</button>
				);
			} ) }
		</nav>
	);
}
