import { createRootRoute, Outlet } from "@tanstack/react-router"
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
import { useTranslation } from "react-i18next"
import { DiGit } from "react-icons/di"
import { FaCode } from "react-icons/fa"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"


export const Route = createRootRoute({
    component: RootComponent,
})

function RootComponent() {
    const { t, i18n } = useTranslation()

    return <>
        <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-center gap-20">
            <div className="flex flex-row items-center justify-center gap-2">
                <Button asChild>
                    <a href="https://git.valverde.cloud"><DiGit /> {t("nav:gitRepos")}</a>
                </Button>

                <Button asChild>
                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t("nav:sourceCode")}</a>
                </Button>

                <Button>Resumé</Button>
            </div>

            <div className="flex flex-row items-center justify-center gap-4">
                <div>
                    <a href="#" onClick={() => i18n.changeLanguage("en")}>English</a> /&nbsp;
                    <a href="#" onClick={() => i18n.changeLanguage("fr")}>Français</a>
                </div>
            </div>
        </div>

        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
            <Card>
                <CardContent>
                    <Outlet />
                </CardContent>
            </Card>
        </div>

        <TanStackRouterDevtools />
    </>
}