use dioxus::prelude::*;
use crate::utils::prop_structs::ButtonProps;

#[cfg(target_family = "wasm")]
use dioxus_router::Link;

pub fn BackToHomePage(cx: Scope) -> Element {
    #[cfg(any(target_family = "windows", target_family = "unix"))]
    return cx.render(rsx!{
        a { class: "flex justify-center p-4 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
            href: "/",
            p {
                "Back to the homepage"
            }
        }
    });
    #[cfg(target_family = "wasm")]
    return cx.render(rsx!{
        Link { class: "flex justify-center p-4 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
            to: "/",
            p {
                "Back to the homepage"
            }
        }
    });
}

pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
    let title = cx.props.title.clone();
    let title_ref = title.as_str();
    let slug = cx.props.slug.clone();
    let slug_ref = slug.as_str();
    #[cfg(any(target_family = "windows", target_family = "unix"))]
    return cx.render(rsx!{
        a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
            href: "{slug_ref}",
            "{title_ref}"
        }
    });
    #[cfg(target_family = "wasm")]
    return cx.render(rsx!{
        Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
            to: "{slug_ref}",
            div {
                dangerous_inner_html: "{title_ref}",
            }
        }
    });
}