use leptos::{
    IntoView, component,
    error::ErrorBoundary,
    prelude::{ClassAttribute, CollectView, ElementChild, Get, GetUntracked},
    view,
};
use leptos_router::{
    NavigateOptions,
    hooks::{use_navigate, use_query_map},
};

use crate::components::{
    product_overview::ProductOverview, recipies::Recipies, site_header::SiteHeader,
};

#[component]
pub fn Home() -> impl IntoView {
    let query_map = use_query_map().get_untracked();
    let navigate = use_navigate();

    if let Some(path) = query_map.get("path") {
        navigate(&path, NavigateOptions::default());
    }

    view! {
        <ErrorBoundary fallback=|errors| {
            view! {
                <h1>"Uh oh! Something went wrong!"</h1>

                <p>"Errors: "</p>
                // Render a list of errors as strings - good for development purposes
                <ul>
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                            .collect_view()
                    }}
                </ul>
            }
        }>

            <div class="flex flex-col content-start">
                <SiteHeader logo=icondata_io::IoRoseSharp back_location="/" name="Rocie" />
                <ProductOverview />
                <Recipies />
            </div>
        </ErrorBoundary>
    }
}