import { useAppSelector } from "../../../../app/redux/hooks";
import InfoIcon from "@mui/icons-material/Info";

export const MobileAppRecommendationPrompt = (props: any) => {
  const location = useAppSelector((state) => state.locationState);
  const onCloseModals = () => {
    props.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">
          <div className="modal-content text-center">
            <img
              src="/images/Web-Logo.png"
              width="100"
              alt=""
              style={{
                display: "block",
                marginLeft: "auto",
                marginRight: "auto",
              }}
            />
            <div className="header mb-2">
              <div
                className="demo-title"
                style={{ fontSize: "12px", marginTop: "15px" }}
              >
                Get the Best Experience on Our Mobile App!
              </div>
            </div>
            <div className="tf-login-form">
              <form className="">
                {/* <div className="mb-3 mt-0 address-text">
                  <p>{location?.display_name}</p>
                </div> */}
                <div className="mb-2 mt-0">
                  <small className="orange-txt" style={{ fontSize: "12px" }}>
                    <InfoIcon style={{ fill: "#ef7e20", fontSize: "12px" }} />{" "}
                    Experience seamless shopping on the go! Download our mobile
                    app now and enjoy exclusive deals, faster checkout, and
                    personalized recommendations—anytime, anywhere!
                  </small>
                </div>
                <div className="bottom">
                  <div>
                    <a href="#" className="btn-prime">
                      Download Mobile App
                    </a>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};