use dioxus::prelude::*;
use dioxus_i18n::t;

pub fn Footer() -> Element {
    rsx! {
        div {
            class: "container mx-auto pb-4",
            footer {
                class:"rounded-lg shadow bg-gray-800",
                div {
                    class:"w-full mx-auto p-4 flex items-center justify-between",
                    span {
                        class:"text-sm sm:text-center text-gray-400",
                        { t!("footer_year") },
                        a { href: "#",  class: "hover:underline", { t!("footer_name") }},
                        { t!("footer_rights") }
                    }
                    ul {
                        class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-400 sm:mt-0",
                        li {
                            Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", { t!("footer_contact") } }
                        },
                    }
                }
            }
        }
    }
}

#[component]
fn Logo(src: String, alt: String) -> Element {
    rsx! {
        img {
            class: "h-auto max-w-40 transition-all duration-300 rounded-lg cursor-pointer filter grayscale hover:grayscale-0",
            src: "{src}",
            alt: "{alt}"
        }
    }
}