use yew::{function_component, html, Html, Properties};

#[function_component]
pub fn Navbar(props: &NavbarProps) -> Html {
    let elements_html = props.elements.iter().map(|elem| html!{
        <NavbarElem icon={elem.icon.clone()} tooltip={elem.tooltip.clone()} link={elem.link.clone()} spacer={elem.spacer}/>
    }).collect::<Html>();

    html! {
        <div class="bg-base absolute flex flex-col gap-2 flex-nowrap w-16 h-full items-center pt-2">
            {elements_html}
        </div>
    }
}

#[derive(Properties, PartialEq)]
pub struct NavbarProps {
    pub elements: Vec<NavbarElemProps>,
}

#[derive(Properties, PartialEq)]
pub struct NavbarElemProps {
    pub icon: String,
    pub tooltip: String,
    pub link: String,
    pub spacer: bool,
}

#[function_component]
fn NavbarElem(props: &NavbarElemProps) -> Html {
    match props.spacer {
    false => html! {
        <a href={ props.link.clone() } class="w-12 h-12 justify-content-center bg-surface0 shadow-lg hover:bg-green flex items-center justify-center rounded-3xl hover:rounded-xl transition-all group text-white hover:text-base">
            <i class={  format!("text-3xl {}", props.icon.clone() )}></i>
            <span class="absolute w-auto p-2 m-2 min-w-max left-16 bg-surface0 rounded-xl text-white opacity-0 group-hover:opacity-100 transition-all">
                {props.tooltip.clone()}
            </span>
        </a>
    },
    true => html! {
        <div class="h-1 bg-overlay0 w-12 rounded-xl my-2 "></div>
    },
    }
}
