use crate::components::{Card, P};
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};

#[component]
pub fn Home() -> Element {
    let i18 = use_i18();
    rsx! {
        div {
            class: "container mx-auto p-4 flex items-center justify-center max-w-md w-full",
            Card {
                name: translate!(i18, "home.card.name"),
                gender: translate!(i18, "home.card.gender"),
                picture: "/pictures/headshot.webp",
                div {
                    class: "py-4",
                    div {
                        class: "mb-2",
                        P { { translate!(i18, "home.card.l1") }  },
                        P { { translate!(i18, "home.card.l2") }  },
                        P { { translate!(i18, "home.card.l3") },
                            Link {
                                to: "https://git.tudattr.dev/explore/repos",
                                new_tab: true,
                                class: "items-center font-medium hover:underline",
                                "gitea"},
                            { translate!(i18, "home.card.l3_1") }
                        },
                    },
                },
                Link {
                    to: "mailto:tuan-dat.tran@tudattr.dev",
                    class: "text-gray-900 bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white rounded-full shadow-lg py-4 px-4",
                    { translate!(i18, "home.card.contact_button") }
                }
            },
        }
    }
}