import { post } from "@/api1/apiUtils";
import Link from "next/link";
import { useState } from "react";
import toast from "react-hot-toast";

const Footer = () => {

  const [email, setEmail] = useState('')


  const handleSubmit = async (e: any) => {
    e.preventDefault()
    try {
      const res = await post('/newsletter', { email });
      // console.log(res)
      toast.success(res?.message)
      setEmail('')
    }
    catch (err: any) {
      console.log(err)
      toast.error("Please Try Again Later")
    }
  }



  return (
    <footer className="footer-bg-clr mt-4">
      <div className="container">
        <div className="row">
          <div className="col-md-3 mt-4">
            <h3 className="footer-title-name">Get In Touch</h3>
            <div className="ftr-tagline"></div>
            <p className="footer-linkvw">
              <i className="bi bi-geo-alt-fill"></i>near Ayodhya Bypass Ayodhya 224001
            </p>
            <p className="footer-linkvw">
              <i className="bi bi-telephone-fill"></i> +919584872001
            </p>
            <p className="footer-linkvw">
              <i className="bi bi-envelope-fill"></i> info@ayodhyas.com
            </p>

            <div className="mt-4 d-flex">
              <a href="#">
                <div className="">
                  <i className="bi bi-facebook ftr-socialicon"></i>
                </div>
              </a>
              <a href="#">
                <div className="">
                  <i className="bi bi-twitter ftr-socialicon ms-2"></i>
                </div>
              </a>
              <a href="https://www.instagram.com/ayodhas_com/">
                <div className="">
                  <i className="bi bi-instagram ftr-socialicon ms-2"></i>
                </div>
              </a>
              <a href="#">
                <div className="">
                  <i className="bi bi-linkedin ftr-socialicon ms-2"></i>
                </div>
              </a>
            </div>
          </div>
          <div className="col-md-3 mt-4">
            <h3 className="footer-title-name">Quick Links</h3>
            <div className="ftr-tagline"></div>
            <Link href="/about-us" className="footer-linkvw">About Us</Link>
            <p className="footer-linkvw">Contact Us</p>
            {/* <p className="footer-linkvw">Our Services</p> */}
            <p className="footer-linkvw">Privacy Policy</p>
            <p className="footer-linkvw">Terms & Condition</p>
          </div>

          <div className="col-md-3 mt-4">
            <h3 className="footer-title-name">Services</h3>
            <div className="ftr-tagline"></div>

            <p className="footer-linkvw">Hotels Near Ram Mandir</p>

            <p className="footer-linkvw">Best Hotel in Ayodhya</p>

            <p className="footer-linkvw">Cheapest Hotel in Ayodhya</p>

            <p className="footer-linkvw"></p>
          </div>

          <div className="col-md-3 mt-4">
            <h3 className="footer-title-name">Newsletter</h3>
            <div className="ftr-tagline"></div>
            <p className="mt-2" style={{ color: "#c7c7c7" }}>
              Subscribe for the latest update
            </p>

            <form onSubmit={handleSubmit}>
              <input
                value={email}
                type="email"
                className="ftr-frm-input"
                placeholder="Enter your email address"
                onChange={(e: any) => setEmail(e.target.value)}
              />
              <div>
                <button className="ftr-frm-button" type="submit">
                  <i className="bi bi-arrow-right fs-5"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
        <div className="ftr-topline-vw"></div>
        <p className="ftr-copy-fntvw">
          <i className="bi bi-c-circle-fill"></i> Hotel, All Rights Reserved.
        </p>
      </div>
    </footer>
  );
};

export default Footer;