import Image from "next/image";
import React, { Fragment } from "react";
import { renderImage } from "../../services/imageHandling";
import { Button } from "react-bootstrap";
import { useRouter } from "next/router";

const ThankYou = () => {
  const router = useRouter();
  return (
    <Fragment>
      <div className="contaier-fluid login-banner-image">
        <div className="row">
          <div className="col-12 col-lg-4 login-div">
            <div className="thankyou-div">
              <span className="image-container">
                <Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
              </span>
              <h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
              <p className="mb-4">Your Profile is been created successfully</p>
            </div>

            <div className="form-container">
              <div className="input-group mb-2">
                <Button
                  type="button"
                  className="btn btn-primary btn-submit"
                  onClick={() => {
                    router.push("/");
                  }}
                >
                  Proceed to Home Page
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default ThankYou;