use leptos::prelude::*;

pub struct HeaderItems {
    pub left: Vec<HeaderItem>,
    pub middle: Vec<HeaderItem>,
    pub right: Vec<HeaderItem>,
}

pub struct HeaderItem {
    pub text: String,
    pub link: Option<String>,
}

/// Header with background color etc.
#[component]
pub fn StyledHeader(items: HeaderItems) -> impl IntoView {
    view! {
        <div class="bg-orange-300 text-black border-b-2 border-b-orange-400">
            // <div class="container mx-auto" >
                <Header items />
            // </div>
        </div>
    }
}

/// Function header without styling
#[component]
pub fn Header(items: HeaderItems) -> impl IntoView {
    let HeaderItems { left, middle, right } = items;

    view! {
        <div class="grid grid-cols-[1fr_3fr_1fr] text-xl font-semibold p-4">
            // Left side of header
            <div class="justify-self-start">
                <Items items=left />
            </div>

            // Expanding space in the middle
            <div class="justify-self-center font-semibold">
                <Items items=middle />
            </div>

            // Right side of header
            <div class="justify-self-end">
                <Items items=right />
            </div>
        </div>
    }
}

#[component]
fn Items(items: Vec<HeaderItem>) -> impl IntoView {
    let items = items.into_iter().map(|item| view! { <Item item /> }).collect_view();
    view! { <div class="flex gap-4">{items}</div> }
}

#[component]
fn Item(item: HeaderItem) -> impl IntoView {
    let text = item.text;
    let link = item.link;

    if let Some(link) = link {
        view! {
            <a href=link>
                <span class="whitespace-nowrap">{text}</span>
            </a>
        }
        .into_any()
    } else {
        view! { <span class="whitespace-nowrap">{text}</span> }.into_any()
    }
}
