use crate::components::Background;
use crate::components::BackgroundProps;
use crate::routes::blog::*;
use crate::routes::empty::*;
use crate::routes::home::*;
use crate::routes::whymdc::*;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context(cx);

    view! {
        cx,

        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/leptos_start.css"/>

        // sets the document title
        <Title text="NationTech"/>

        // content for this welcome page
        <Router>
            <main class="text-white bg-indigo-950 min-h-screen relative">
                <div class="max-w-3xl container mx-auto p-4 md:p-0 md:pb-14 relative z-50 bg-opacity-90 bg-indigo-950">
                    <nav class="py-4 flex space-x-4">
                        <a href="/">"Home"</a>
                        <a href="/blog">"Blog"</a>
                    </nav>
                    <hr />
                    <Routes>
                        <Route path="" view=|cx| view! { cx, <HomePage/> }/>
                        <Route path="/why-micro-datacenters" view=|cx| view! { cx, <WhyMicroDatacenters/> }/>
                        <Route path="/blog" view=|cx| view! { cx, <Blog/> }/>
                        <Route path="/background" view=|cx| view! { cx, <Empty/> }/>
                    </Routes>
                </div>
                <Background class="fixed h-screen w-screen top-0 z-0"/>
            </main>
        </Router>
    }
}
