import { render } from 'preact';
import { LocationProvider, Router, Route } from 'preact-iso';

import { Header } from './components/Header/index.jsx';
import { Home } from './pages/Home/index.jsx';
import { About } from './pages/About/index.jsx';
import { Articles } from './pages/Articles/index.jsx';
import { NotFound } from './pages/_404.jsx';
import { Theme, Flex, Button, Box, Container, Heading } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';

export function App() {
	return (
		<LocationProvider>
				<Theme accentColor="sky" grayColor="slate">
					<Container size="3">
						<Flex direction="column" justify="center" align="center">
							<Header />
							<Box>
								<Router>
									<Route path="/" component={Home} />
									<Route path="/about" component={About} />
									<Route path="/articles" component={Articles} />
									<Route default component={NotFound} />
								</Router>
								<Button>Hi</Button>
							</Box>
						</Flex>
					</Container>
				</Theme>
		</LocationProvider>
	);
}

render(<App />, document.getElementById('app'));