use leptos::{
    IntoView, component,
    prelude::{Children, ClassAttribute, ElementChild},
    view,
};
use leptos_router::components::A;

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

    // TODO: Add the direct link to the first button back. <2026-02-15>
    // let first_button_path = buttons.first().expect("Should have at least on button").1;

    view! {
        <div class="p-4 mt-4 mr-4 ml-4 md-2 text-justify rounded-lg border-gray-600 border">
            <h2 class="text-lg text-bold">{header}</h2>
            {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 text-nowrap first:rounded-l-full last:rounded-r-full">
                                <A href=move || path.to_owned()>{name}</A>
                            </li>
                        }
                    })
                    .collect::<Vec<_>>()}
            </ul>
        </div>
    }
}