import {
  CenterLayout,
  FullPageLayout,
  NextLinkComposed,
  useUser,
} from "@witel/webapp-builder";
import { Button, Typography } from "@mui/material";
import { useTranslations } from "next-intl";

const FirstComponent = () => {
  const { user } = useUser();
  const t = useTranslations();
  return (
    <FullPageLayout>
      <CenterLayout spacing={2}>
        {user.permissions.includes("can_request_navgan_loan") ? (
          <>
            <Typography>{t("Dashboard.go_to_add_request_loan")}</Typography>
            <Button
              component={NextLinkComposed}
              to={{ pathname: "/dashboard/navgan/add-request-loan" }}
              variant={"contained"}
              size={"large"}
            >
              {t("LoanRequest.loan_request_page")}
            </Button>
          </>
        ) : (
          <>
            <Typography>{t("Dashboard.go_to_followUp-loan")}</Typography>
            <Button
              component={NextLinkComposed}
              to={{ pathname: "/dashboard/navgan/followUp-loan" }}
              variant={"contained"}
              size={"large"}
            >
              {t("LoanFollowUp.loan_follow_up_page")}
            </Button>
          </>
        )}
      </CenterLayout>
    </FullPageLayout>
  );
};

export default FirstComponent;