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! {
        Card {
            name: translate!(i18, "home.card.name"),
            gender: translate!(i18, "home.card.gender"),
            picture: "/pictures/comfy.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: "inline-flex items-center font-medium hover:underline",
                            "gitea"},
                        { translate!(i18, "home.card.l3_1") }
                    },
                },
            },
            Link {
                to: "mailto:tuan-dat.tran@tudattr.dev",
                class: "w-fit relative inline-flex items-center justify-center p-1 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white w-fill",
                p {
                    class: "p-1",
                    { translate!(i18, "home.card.contact_button") }
                }
            }
        },
    }
}