use leptos::{
    IntoView, component,
    prelude::{Children, ClassAttribute, ElementChild, OnAttribute},
    view,
};
use leptos_router::{NavigateOptions, hooks::use_navigate};

#[component]
pub fn Container(
    header: impl IntoView,
    buttons: Vec<(impl IntoView, &'static str)>,
    children: Children,
) -> impl IntoView {
    assert!(!buttons.is_empty());

    let first_button_path = buttons.first().expect("Should have at least on button").1;

    view! {
        <button
            type="button"
            on:click=|_| {
                use_navigate()(first_button_path, NavigateOptions::default());
            }
        >
            <div class="p-4 mt-4 mr-4 ml-4 md-2 text-justify rounded-lg border-gray-600 border">
                <p class="text-lg text-bold">{header}</p>
                {children()}

                <ul class="flex flex-row gap-1 pt-2 overflow-x-auto">
                    {buttons
                        .into_iter()
                        .map(|(name, path)| {
                            view! {
                                <li class="bg-green-400/40 p-2 first:rounded-l-full last:rounded-r-full">
                                    <button on:click=move |_| {
                                        use_navigate()(path, NavigateOptions::default());
                                    }>{name}</button>
                                </li>
                            }
                        })
                        .collect::<Vec<_>>()}
                </ul>
            </div>
        </button>
    }
}