import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { ArrowLeft } from "lucide-react";

const EsqueceuSenha = ({
  recoverForm,
  recoverHandleSubmit,
  handleChangePass,
  isLoading,
  changeView,
}: any) => {
  const { isMobile, isSmallDesktop } = useScreenContext();

  const sendFunction = () => {
    return recoverHandleSubmit(handleChangePass);
  };
  return (
    <div className="absolute top-10 px-8 w-full">
      <div
        onClick={() => changeView(false)}
        className="flex  gap-6 items-center text-black w-full"
      >
        <ArrowLeft size={21} />
        <p className="text-center font-semibold">Esqueceu sua senha</p>
      </div>
      <form className="mt-12" onSubmit={sendFunction}>
        <div className="mb-8">
          <Input
            name="sigla"
            formulario={recoverForm}
            required
            label={isMobile || isSmallDesktop ? "" : "Sigla"}
            placeholder={isMobile || isSmallDesktop ? "Digite a sigla" : ""}
            error="Preencha a Sigla"
          />
        </div>
        <Input
          name="email_usuario"
          formulario={recoverForm}
          label={isMobile || isSmallDesktop ? "" : "Email"}
          placeholder={isMobile || isSmallDesktop ? "Digite o email" : ""}
          type="email"
          required
          error="Preencha o Email"
        />
        <div className="flex items-center justify-center pt-4 ">
          <Button
            className="w-full bg-primary max-sm:h-[55px] max-[770px]:h-[50px] max-sm:rounded-lg max-sm:mt-12 max-[770px]:mt-14 max-sm:text-sm"
            loading={isLoading}
          >
            Enviar Email
          </Button>
        </div>
      </form>
    </div>
  );
};

export default EsqueceuSenha;