use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};

use crate::components::H1;

pub fn Footer() -> Element {
    let i18 = use_i18();

    rsx! {
        div {
            // ToolsUsed {},
            footer {
                class:"bg-white rounded-lg shadow dark:bg-gray-800",
                div {
                    class:"w-full mx-auto p-4 flex items-center justify-between",
                    span {
                        class:"text-sm text-gray-500 sm:text-center dark:text-gray-400",
                        { translate!(i18, "footer.year") },
                        a { href: "#",  class: "hover:underline", { translate!(i18, "footer.name") }},
                        { translate!(i18, "footer.rights") }
                    }
                    ul {
                        class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",
                        li {
                            Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", { translate!(i18, "footer.contact") } }
                        },
                    }
                }
            }
        }
    }
}

#[allow(dead_code)]
fn ToolsUsed() -> Element {
    rsx! {
        div {
            class:"items-center bg-white rounded-lg shadow dark:bg-gray-800 p-4 my-4",
            div {
                H1 {class: "justify-center", "Tools used" },
            }
            div {
                class: "flex h-fill overflow-x-auto",
                Logo {
                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Rust/Rust.png",
                    alt: "Rust"
                },
                Logo {
                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Tailwindcss/Tailwindcss6.png",
                    alt: "Tailwindcss"
                },
                Logo {
                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Html/HTML.png",
                    alt: "HTML"
                },
                Logo {
                    src: "https://raw.githubusercontent.com/Aikoyori/ProgrammingVTuberLogos/main/Docker/DockerLogo.png",
                    alt: "Docker"
                },
                Logo {
                    src: "https://raw.githubusercontent.com/Aikoyori/ProgrammingVTuberLogos/main/Neovim/NeovimLogo.png",
                    alt: "NeoVim"
                },

            }
        }
    }
}

#[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}"
        }
    }
}