export function AdminShell( { surface, children } ) {
	const boot = window.newsroomSettingsBoot || {};
	const nav = boot.nav || [];

	return (
		<div className="nros-admin">
			<aside className="nros-admin__sidebar">
				<div className="nros-admin__brand">
					<span className="nros-admin__logo" aria-hidden="true">N</span>
					<span className="nros-admin__brand-text">Newsroom OS</span>
				</div>
				<nav className="nros-admin__nav" aria-label="Newsroom admin">
					{ nav.map( ( item ) => (
						<a
							key={ item.id }
							href={ item.url }
							className={ `nros-admin__nav-link${ surface === item.id ? ' is-active' : '' }` }
						>
							<span className="nros-admin__nav-icon" aria-hidden="true">{ item.icon }</span>
							{ item.label }
						</a>
					) ) }
				</nav>
				<div className="nros-admin__sidebar-foot">
					{ boot.isPro ? (
						<span className="nros-admin__pro-pill">⚡ PRO</span>
					) : (
						<a href={ boot.proPageUrl || boot.proUrl || 'admin.php?page=newsai-settings&tab=pro' } className="nros-admin__pro-link">
							⚡ PRO Features
						</a>
					) }
					<a
						href={ boot.wpAdminUrl || 'index.php' }
						className="nros-admin__exit-link"
					>
						<span aria-hidden="true">←</span>
						{ ( boot.i18n && boot.i18n.exitToWp ) || 'Exit to WordPress' }
					</a>
				</div>
			</aside>
			<main className="nros-admin__main">
				{ children }
			</main>
		</div>
	);
}
