use dioxus::prelude::*;

use crate::Route;

pub fn Header() -> Element {
    rsx! {
        nav {
            div { class:" flex flex-wrap items-center justify-between mx-auto p-4",
                Link {
                    to: Route::Home {},
                    class:"flex items-center space-x-3 rtl:space-x-reverse",
                    img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"Flowbite Logo" },
                    span { class:"self-center text-2xl font-semibold whitespace-nowrap dark:text-white", "" }
                }
                button {
                    r#type:"button",
                    class:"inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
                    aria_controls:"navbar-default",
                    aria_expanded:"false",
                    span { class:"sr-only", "Open main menu" },
                }
                div { class:"hidden w-full md:block md:w-auto", id:"navbar-default",
                    ul { class:"font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",
                        li {
                            Link { to: Route::Home {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Home" }
                        }
                        li {
                            Link { to: Route::CV {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "CV" }
                        }
                        li {
                            Link { to: Route::Publications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" }
                        }
                        li {
                            Link { to: Route::Impressum {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "About" }
                        }
                    }
                }
            }
        }
    }
}