import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
import { styles } from "./index.css.js";
import { Router } from "@lit-labs/router";

import * as routeHome from "./app-home/routes.js";
import * as routeEpisodes from "./app-episodes/routes.js";

import "./components/c-sronly.js";
const logo = new URL("./assets/logo.svg", import.meta.url);

@customElement("app-cfpodcasts")
export class AppCfpodcasts extends LitElement {
	static override styles = styles;
	private _routes = new Router(this, [
		...routeHome.routes,
		...routeEpisodes.routes,
	]);
	override render() {
		console.log(this._routes); // TODO
		return html`
			<main>${this._routes.outlet()}</main>
			<nav>
				<a
					href="${this._routes.link("/")}"
					title="Navigate to the home page"
					>
					<img alt="" src=${logo} />
					<c-sronly>Home</c-sronly>
				</a>
				<a
					href="${this._routes.link(routeEpisodes.path)}"
					title="Navigate to the list of episodes"
					>
					Episodes
				</a>
			</nav>
		`;
	}
}