import React from "react";

interface Props {
  email: string;
  setEmail: (value: string) => void;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

const EmailInput: React.FC<Props> = ({ email, setEmail, onSubmit }) => {
  return (
    <div className="request-container">
      <h1 className="header">Forgot password</h1>
      <p className="sub-header">
        Enter your email for the verification process, we will send a 4-digit
        code to your email.
      </p>
      <form
        className="auth-form"
        onSubmit={(e) => {
          e.preventDefault();
          onSubmit(e);
        }}
      >
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit" className="continue-button">
          Continue
        </button>
      </form>
    </div>
  );
};

export default EmailInput;
