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 {
    view! {
        <div class="p-4 mt-4 mr-4 ml-4 md-2 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>
    }
}