import { h } from 'preact';
import { Router } from 'preact-router';
import ContextsProviders from '../Contexts';
import Header from './Header';


// Code-splitting is automated for `routes` directory
import Home from '../routes/Home';
import Plant from '../routes/Plant';
import Profile from '../routes/Profile';
import Style from "../routes/Style";

const App = () => {

	return (
	<div id="app" className="h-screen overflow-auto flex flex-col">
		<ContextsProviders>
			<Header />
			<main className="flex-1 dark:bg-gray-800 dark:text-white">
				<Router>
					<Home path="/" />
					<Plant path="plant/:id" />
					<Profile path="/profile" />
					<Style path="/style" />
				</Router>
			</main>
		</ContextsProviders>
	</div>
)}

export default App;