import React from "react";
import "./Stay_Connected.css";
import { Form, InputGroup } from "react-bootstrap";
import Success_Modal from "../../common-components/common_modal/success_modal/Success_Modal";

function Stay_Connected() {
  const [modalShow, setModalShow] = React.useState(false);
  const handleClick = () => {
    setModalShow(true);
    setTimeout(() => {
      setModalShow(false);
    }, 3000);
  };
  return (
    <>
      <section className="Stay_Connected_holder">
        <div className="container">
          <div className="Stay_Connected">
            <div className="text_holder">
              <h4 className="heading_text"> STAY CONNECTED</h4>
              <p>
                Be the first to know about our new products, seasonal offers,
                and wellness tips rooted in tradition.
              </p>
            </div>
            <div className="field_holder">
              <Form>
                <InputGroup className="mb-3">
                  <Form.Control placeholder="Put Email Here" />
                  <InputGroup.Text id="basic-addon2" onClick={handleClick}>Subscribe</InputGroup.Text>
                </InputGroup>
              </Form>
            </div>
          </div>
        </div>
      </section>

      <Success_Modal
        show={modalShow}
        onHide={() => { setModalShow(false) }}
        successText="Subscribe Successfully!"
      />
    </>
  );
}

export default Stay_Connected;
