use leptos::{
    IntoView, component,
    error::ErrorBoundary,
    prelude::{Children, ClassAttribute, CollectView, ElementChild, Get},
    view,
};

use crate::components::site_header::SiteHeader;

#[component]
pub(crate) fn CatchErrors(children: Children) -> impl IntoView {
    view! {
        <ErrorBoundary fallback=|errors| {
            view! {
                <SiteHeader
                    logo=icondata_io::IoRoseSharp
                    back_location="/"
                    name="Errors occurred"
                />

                <h1>"Uh oh! Something went wrong!"</h1>

                <p>"Errors: "</p>
                <ul class="flex flex-col gap-1">
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| {
                                view! {
                                    <li class="bg-gray-200 rounded-lg m-2 p-1">{e.to_string()}</li>
                                }
                            })
                            .collect_view()
                    }}
                </ul>
            }
        }>{children()}</ErrorBoundary>
    }
}