use icondata_core::Icon as DataIcon;
use leptos::prelude::{ClassAttribute, ElementChild, IntoView, OnAttribute, component, view};
use leptos_icons::Icon;
use leptos_router::{NavigateOptions, hooks::use_navigate};

#[component]
pub fn SiteHeader(
    logo: DataIcon,
    back_location: &'static str,
    name: &'static str,
    #[prop(default = None)] menu: Option<String>,
) -> impl IntoView {
    let navigate = use_navigate();

    view! {
        <div
            class="flex flex-row justify-between items-center p-2 px-4 w-full h-1/12 bg-gray-100"
            on:click=move |_| {
                navigate(back_location, NavigateOptions::default());
            }
        >
            <div class="max-w-14">
                <Icon icon=logo />
            </div>
            <p class="text-xl">{name}</p>
            <div>{menu}</div>
        </div>
    }
}