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 { Box, Button, Grid, 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}
        />
        <Typography variant="h5" sx={{ textAlign: "center" }}>
          {t("app_name")}
        </Typography>
        {isAuth ? (
          <Button
            variant="contained"
            component={NextLinkComposed}
            to={{
              pathname: "/dashboard",
            }}
          >
            {t("dashboard")}
          </Button>
        ) : (
          <Box>
            <Grid
              container
              rowSpacing={{ xs: 1, sm: 0 }}
              sx={{
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "center",
              }}
            >
              <Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
                <Button
                  sx={{ whiteSpace: "nowrap" }}
                  variant="contained"
                  size="large"
                  component={NextLinkComposed}
                  to={{
                    pathname: "/login-navy",
                  }}
                >
                  {t("login_navy")}
                </Button>
              </Grid>
              <Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
                <Button
                  sx={{ whiteSpace: "nowrap" }}
                  variant="contained"
                  size="large"
                  component={NextLinkComposed}
                  to={{
                    pathname: "/login-welfare-services",
                  }}
                >
                  {t("login_welfare_services")}
                </Button>
              </Grid>
            </Grid>
          </Box>
        )}
      </CenterLayout>
    </FullPageLayout>
  );
};

export default FirstComponent;