import { Textinput } from '@/components';
import Button from '@/components/ui/Button';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Form } from 'react-bootstrap';

const User = () => {
  const [email, setEmail] = useState<string>('');

  const router = useRouter();

  const handleFormSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();
    router.push('/auth/otp?otpType=forgotPassword');
  };

  return (
    <>
      <div className="h-100 position-relative d-flex flex-column justify-content-center align-items-center">
        <h2 className="display-6 fw-bolder ">Forgot Password</h2>
        <p>Please enter your email to reset your password</p>
        <form action="#!" onSubmit={handleFormSubmit} className="w-100">
          <Form.Group controlId="formEmail" className="mt-4">
            <Form.Label className="">Email address</Form.Label>
            <Textinput
              iconLeft={<img src="/images/icons/email.png" />}
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter email"
            />
          </Form.Group>

          <div className="d-flex justify-content-center align-items-center">
            <Button
              size="md"
              type="submit"
              className="mt-5  btn btn-feature auth-btn"
            >
              Continue
            </Button>
          </div>
        </form>
      </div>
    </>
  );
};

export default User;