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 root from "react-shadow"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"


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

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

    return <>
        <div className="flex flex-row items-center justify-center gap-2 p-2">
            <Button
                variant={i18n.language !== "en" ? "default" : "noShadow"}
                onClick={() => i18n.changeLanguage("en")}
            >
                🇬🇧 English
            </Button>

            <Button
                variant={i18n.language !== "fr" ? "default" : "noShadow"}
                onClick={() => i18n.changeLanguage("fr")}
            >
                🇫🇷 Français
            </Button>
        </div>

        <div className="container mt-20 mr-auto ml-auto">
            <div className="mr-auto ml-auto flex w-fit flex-row items-start justify-around gap-10">
                <root.div>
                    <link rel="stylesheet" href="/98.css/dist/98.css" />

                    <div className="window" style={{ width: 300 }}>
                        <div className="title-bar">
                            <div className="title-bar-text">Julien Valverde</div>
                        </div>
                        <div className="window-body">
                            <p>There's so much room for activities!</p>
                        </div>
                    </div>
                </root.div>

                <div>
                    <h1>Ingénieur Full Stack &bull; Entrepreneur</h1>

                    <p className="mt-2">
                        I am passionate about integrating functionality and design in applications to create intuitive, user-friendly experiences.
                    </p>

                    <div className="flex w-fit flex-row items-center justify-center gap-2 mt-4">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button asChild>
                                        <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos.title, { ns: "nav" })}</a>
                                    </Button>
                                </TooltipTrigger>

                                <TooltipContent><p>{t($ => $.gitRepos.tooltip, { ns: "nav" })}</p></TooltipContent>
                            </Tooltip>
                        </TooltipProvider>

                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button asChild>
                                        <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode.title, { ns: "nav" })}</a>
                                    </Button>
                                </TooltipTrigger>

                                <TooltipContent><p>{t($ => $.sourceCode.tooltip, { ns: "nav" })}</p></TooltipContent>
                            </Tooltip>
                        </TooltipProvider>

                        <Button>Resumé</Button>
                    </div>
                </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 />
    </>
}