use dioxus::prelude::*;
use dioxus_router::prelude::*;

use crate::info_app::Route;
use crate::utils::prop_structs::ImageProps;

#[component]
pub fn PageButton(button_text: String, button_route: Route, image_props: ImageProps) -> Element {
    rsx! {
        nav {
            div { class: "w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition",
                Link {
                    class: "p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition",
                    to: button_route,
                    img {
                        class: "animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top",
                        src: image_props.src,
                        alt: image_props.alt
                    }
                    " {button_text}"
                }
            }
        }
    }
}
