import { Router, Route } from "@solidjs/router";
import type { Component } from "solid-js";
import Home from "./components/Home";
import BookList from "./components/BookList";
import AuthorList from "./components/AuthorList";
import SeriesList from "./components/SeriesList";

const App: Component = () => {
	return (
		<div>
			<header>
				<nav class="navbar navbar-expand-lg bg-body-tertiary">
					<div class="container">
						<a class="navbar-brand" href="#">
							Navbar
						</a>
						<button
							class="navbar-toggler"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#navbarNavAltMarkup"
							aria-controls="navbarNavAltMarkup"
							aria-expanded="false"
							aria-label="Toggle navigation"
						>
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
							<div class="navbar-nav">
								<a class="nav-link active" href="/">
									Home
								</a>
								<a class="nav-link" href="/books">
									Books
								</a>
								<a class="nav-link" href="/authors">
									Authors
								</a>
								<a class="nav-link" href="/series">
									Series
								</a>
							</div>
						</div>
					</div>
				</nav>
			</header>

			<main class="container">
				<Router>
					<Route path="/books/author/:authorid" component={BookList} />
					<Route path="/books" component={BookList} />
					<Route path="/authors" component={AuthorList} />
					<Route path="/series" component={SeriesList} />
					<Route path="/" component={Home} />
				</Router>
			</main>
		</div>
	);
};

export default App;