import { Button, Modal } from "@mui/material";
import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";

export default function NeedLoginModal({ open, setOpen }) {
  const loginBarrier = useLoginBarrier();

  return (
    <>
      <Modal
        open={open && isLoggedIn}
        className="grid h-screen place-items-center m-5"
        onClose={() => setOpen(false)}
        slotProps={{
          backdrop: {
            sx: {
              backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
            },
          },
        }}
      >
        <div>
          <div className="flex flex-col rounded-lg bg-white-HC-dark  p-3">
            <div className="text-xl text-darkGray-HC-white font-bold ">Entrar</div>
            <div className="p-3">
              <div className="text-base text-darkGray-HC-white">
                Você precisa entrar ou se cadastrar para executar essa ação.
              </div>
              <div className="flex flex-wrap justify-center gap-1 items-stretch">
                <Button
                  variant="contained"
                  className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark disabled:bg-red mt-3 text-white-HC-dark-underline hover:text-turquoise-HC-white shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow outline outline-1 outline-ice-HC-white"
                  onClick={loginBarrier}
                >
                  Ir para página de Login
                </Button>
                <Button
                  variant="contained"
                  className="bg-white-HC-dark  disabled:bg-red mt-3 text-turquoise-HC-white-underline  hover:text-turquoise-HC-white shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
                  onClick={() => setOpen(false)}
                >
                  Cancelar
                </Button>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
}