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 [password, setPassword] = useState<string>('');
  const [confirmPassword, setConfirmPassword] = useState<string>('');

  const router = useRouter();

  const handleFormSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();

    router.push('/auth/login');
  };

  return (
    <>
      <div className="h-100 position-relative d-flex flex-column justify-content-center align-items-center">
        <h2 className="display-6 fw-bolder ">Reset Password</h2>
        <p>Please enter your new password to continue</p>
        <form onSubmit={handleFormSubmit} className="w-100">
          <Form.Group controlId="formEmail" className="mt-4">
            <Form.Label className="">Password</Form.Label>
            <Textinput
              iconLeft={<img src="/images/icons/lock.png" />}
              iconRight={<img src="/images/icons/eye.png" />}
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Enter Password"
            />
          </Form.Group>

          <Form.Group controlId="formEmail" className="mt-4">
            <Form.Label className="">Confirm Password</Form.Label>
            <Textinput
              iconLeft={<img src="/images/icons/lock.png" />}
              iconRight={<img src="/images/icons/eye.png" />}
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="Enter Password"
            />
          </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"
            >
              Reset
            </Button>
          </div>
        </form>
      </div>
    </>
  );
};

export default User;