import { HashRouter, NavLink, Route, Routes } from 'react-router-dom';
import Billing from './billing/BillingPage';
import EditionMismatchBanner from './components/EditionMismatchBanner';
import ReauthTopBanner from './components/ReauthTopBanner';
import Dashboard from './pages/Dashboard';
import Products from './pages/Products';
import Settings from './pages/Settings';

// MINTALL_EDITION is compile-time, so Terser drops the Billing route and
// nav from the wporg zip: the free edition has no plan to
// manage, so there's no Billing page at all there.
const isWoo = MINTALL_EDITION === 'woo';

export default function App(): JSX.Element {
	return (
		<HashRouter>
			<div>
				<EditionMismatchBanner />
				<ReauthTopBanner />
				<h1 style={{ margin: '0 0 16px' }}>Mintall Keep</h1>
				<nav className="mintall-nav">
					<NavLink to="/" end>
						Dashboard
					</NavLink>
					<NavLink to="/products">Products</NavLink>
					{isWoo && <NavLink to="/billing">Billing</NavLink>}
					<NavLink to="/settings">Settings</NavLink>
				</nav>
				<Routes>
					<Route path="/" element={<Dashboard />} />
					<Route path="/products" element={<Products />} />
					{isWoo && <Route path="/billing" element={<Billing />} />}
					<Route path="/settings" element={<Settings />} />
				</Routes>
			</div>
		</HashRouter>
	);
}