import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Button, Stack, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import SvgDashboard from "@/core/components/svgs/SvgDashboard";

const FirstComponent = () => {
    const t = useTranslations();
    const {isAuth} = useUser();

    return (
        <FullPageLayout sx={{p: 1}}>
            <CenterLayout spacing={3}>
                <SvgDashboard width={300} height={200}/>
                <Typography variant="h5" sx={{textAlign: "center"}}>
                    {t("app_name")}
                </Typography>
                <Button
                    data-testid="button-login-or-dashboard"
                    variant={isAuth ? "outlined" : "contained"}
                    component={NextLinkComposed}
                    to={{
                        pathname: isAuth ? "/dashboard" : "/login-expert",
                    }}
                >
                    {isAuth ? t("dashboard") : t("login_expert")}
                </Button>
            </CenterLayout>
            <Stack direction="row" alignItems="center" justifyContent="center">
                <Typography variant={"caption"}
                            sx={{
                                color: 'primary.main',
                                fontFamily: 'Arial',
                                fontWeight: 'bold'
                            }}
                >
                    v{process.env.NEXT_PUBLIC_API_VERSION}
                </Typography>
            </Stack>
            <Stack direction="row" alignItems="center" justifyContent="center">
                <LinkRouting
                    sx={{margin: 0.5, fontSize: "14px"}}
                    href={process.env.NEXT_PUBLIC_POWERED_BY_URL}
                    target="_blank"
                >
                    {t("powered_by_witel")}
                </LinkRouting>
            </Stack>
        </FullPageLayout>
    );
};

export default FirstComponent;