export const LongDistancePrompt = ({
  onClose,
  onProceed,
}: any) => {
  const handleProceed = () => {
    onProceed();
    onClose();
  };

  const handleGoBack = () => {
    onClose();
  };

  return (
    <>
      <div
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: 400,
          color: "var(--main)",
          backgroundColor: "var(--white)",
        }}
      >
        <div className="modal-dialog modal-dialog-centered" style={{ maxWidth: "450px" }}>
          <div className="modal-content text-center">
            <img
              src="/images/location-change.svg"
              alt=""
              style={{
                display: "block",
                marginLeft: "auto",
                marginRight: "auto",
                width: "40%",
              }}
            />
            <div className="header mb-2 text-center">
              <div
                className="demo-title"
                style={{
                  width: "100%",
                  textAlign: "center",
                }}
              >
                <h6 style={{ margin: 0 }}>Switching Delivery Location</h6>
              </div>
            </div>
            <div className="tf-login-form">
              <form className="">
                <div className="mb-3 mt-0">
                  <p className="address-text">
                    You are switching to a new delivery location.
                  </p>
                  <p className="address-text">
                    Do you wish to proceed?
                  </p>
                </div>
                <div className="bottom">
                  <div style={{ display: "flex", gap: "15px", justifyContent: "center" }}>
                    <a className="btn-second" onClick={handleProceed}>
                      Proceed
                    </a>
                    <a className="btn-prime" onClick={handleGoBack}>
                      Go Back
                    </a>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};