import { Meteor } from 'meteor/meteor';
import React, {lazy, Suspense, useState} from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';
import TabNav from '../util/TabNav';
import {Route, Routes} from "react-router-dom";
import Search from './History/Search'

export default () => {
	let tabs = [
		{
			title: "Chromebook Usage",
			getElement: () => {
				const ChromebookUsage = lazy(()=>import('./History/ChromebookUsage'))
				return <ChromebookUsage/>
			},
			path: '/chromebookUsage',
			href: 'chromebookUsage'
		},
		{
			title: "Asset History",
			getElement: () => {
				const AssetHistory = lazy(()=>import('./History/AssetHistory'))
				return <AssetHistory/>
			},
			path: '/assetHistory',
			href: 'assetHistory'
		},
	]

	return (
		<>
			<TabNav tabs={tabs}/>
	
			<Routes>
				<Route path="search" element={<Search/>}/>
			</Routes>
		</>
	)
}