import dahsboardImage from "&/images/dashboard.svg";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import StyledImage from "@/core/components/StyledImage";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Button, Typography} from "@mui/material";
import {useTranslations} from "next-intl";

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

    return (
        <FullPageLayout sx={{p: 1}}>
            <CenterLayout spacing={3}>
                <StyledImage
                    src={dahsboardImage}
                    alt={t("app_name")}
                    width={300}
                    height={200}
                    priority
                />
                <Typography variant="h5" sx={{textAlign: "center"}}>
                    {t("app_name")}
                </Typography>
                {isAuth ? (
                    <Button
                        variant="contained"
                        component={NextLinkComposed}
                        to={{
                            pathname: "/dashboard",
                        }}
                    >
                        {t("dashboard")}
                    </Button>
                ) : (
                    <Button
                        sx={{whiteSpace: "nowrap"}}
                        variant="contained"
                        size="large"
                        component={NextLinkComposed}
                        to={{
                            pathname: "/login",
                        }}
                    >
                        {t("login_user_panel")}
                    </Button>
                )}
            </CenterLayout>
        </FullPageLayout>
    );
};

export default FirstComponent;