import { useNavigate } from "react-router-dom";
import { Typography, Box, Stack } from "@mui/material";
import ControlledButton from "../../../components/Button/button.component";
import { useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";
import Icons from "../../../assets/icons";
import * as ROUTES from "../../../constants/routes";
import "../../Authentication/authentication.scss";
import { Helmet } from "react-helmet";

const LoginMethods = () => {
  const { t } = useTranslation("common");
  const theme = useTheme();
  const navigate = useNavigate();


  const socialAuth = [
    {
      name: t("authentication.login.social.email"),
      icon: <Icons.MAIL />,
      url: ROUTES.LOGIN,
      method: "email",
    },
    {
      name: t("authentication.login.social.phone_number"),
      icon: <Icons.PHONE_NUMBER />,
      url: ROUTES.LOGIN,
      method: "phone-number",
    },
  ];
  const onSignUpClick = () => navigate(ROUTES.REGISTER);

  return (
    <>
      <Helmet>
        <title>{t("login-methods-title")}</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
        />
      </Helmet>
      <Box sx={{ minHeight: "100vh" }}>
        <Stack
          sx={{
            overflow: "hidden",
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            display: "grid",
            justifyItems: "center",
          }}
        >
          <Typography
            variant="h5"
            sx={{ margin: "55px auto" }}
            color={theme.palette.primary.main}
          >
            {t("authentication.login.login")}
          </Typography>

          <Box
            sx={{
              marginTop: "40px !important",
              marginLeft: "auto",
              marginRight: "auto",
              gap: "30px!important",
              display: "grid",
              justifyItems: "center",
            }}
          >
            <Typography
              dangerouslySetInnerHTML={{
                __html: t("authentication.login.agreement-statement"),
              }}
              className="agreement"
            ></Typography>
            <ControlledButton
              value={
                t("authentication.login.new-here") +
                " " +
                t("authentication.register.sign_up")
              }
              customStyle={{
                padding: "15px 40px",
                alignItems: "center",
                borderRadius: 80,
                background: theme.palette.primary.main,
                width: "max-content",
                margin: "0 20px",
                textTransform: "capitalize",
              }}
              onClick={onSignUpClick}
            />
          </Box>
        </Stack>
      </Box>
    </>
  );
};
export default LoginMethods;