import { Button, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import TitlePage from "@/core/components/TitlePage";
import Svg500 from "@/core/components/svgs/Svg500";
import { CenterLayout, FullPageLayout, NextLinkComposed } from "@witel/webapp-builder";

const ServerErrorComponent = () => {
    const t = useTranslations();

    return (
        <>
            <TitlePage text="Titles.title_custom_500" />
            <FullPageLayout sx={{ p: 1 }}>
                <CenterLayout spacing={3}>
                    <Svg500 width={300} height={200} />
                    <Typography margin={2} variant="h6" textAlign="center">
                        {t("ErrorPage.custom_500")}
                    </Typography>
                    <Button
                        variant="contained"
                        component={NextLinkComposed}
                        to={{
                            pathname: "/",
                        }}
                    >
                        {t("ErrorPage.link_routing_back_to")} {t("ErrorPage.link_routing_main_page")}
                    </Button>
                </CenterLayout>
            </FullPageLayout>
        </>
    );
};

export default ServerErrorComponent;