import { useRouter } from "next/router";
import React, { useState } from "react";

function Banner() {
  const [checkInDate, setCheckInDate] = useState("");
  const [checkOutDate, setCheckOutDate] = useState("");
  const [adults, setAdults] = useState(1);
  const [children, setChildren] = useState(0);

  const router = useRouter()


  const handleSearch = (e: any) => {
    e.preventDefault();

    const queryParams = new URLSearchParams({
      checkInDate: checkInDate,
      checkOutDate: checkOutDate,
      adults: adults.toString(),
      children: children.toString()
    }).toString();

    // Push the URL with parameters to the router
    router.push(`/search?${queryParams}`);

    console.log("Search Parameters:", { checkInDate, checkOutDate, adults, children });
  };

  return (
    <>
      <div className="banner-main-szvws">
        <div className="banner-bk-clr"></div>
        <div className="container-2 s-form">
          <div className="rounded p-3" >
            <div className="rounded p-4" style={{ position: 'relative', zIndex: 5 }}>
              <h2 className="">
                <b className="hm-m-txt">Search the Best Place In Ayodhya </b>
              </h2>
              <p className="">
                Find your peaceful haven in Ayodhya with our selection of sanctified hotels.
              </p>

              <form onSubmit={handleSearch} className="mt-4">
                <div className="row">
                  <div className="col-md-4 mt-2">
                    <label htmlFor="" className="checkin-label">
                      Check-in Date
                    </label>
                    <input type="datetime-local" className="checkin-inputbx" value={checkInDate} onChange={(e) => setCheckInDate(e.target.value)} required />
                  </div>
                  <div className="col-md-4 mt-2">
                    <label htmlFor="" className="checkin-label">
                      Check-out Date
                    </label>
                    <input type="datetime-local" className="checkin-inputbx" value={checkOutDate} onChange={(e) => setCheckOutDate(e.target.value)} required />
                  </div>
                  <div className=" col-6 col-md-2 mt-2">
                    <label htmlFor="" className="checkin-label">
                      Adults
                    </label>
                    <input type="number" min="1" max="10" className="checkin-inputbx" value={adults} onChange={(e) => setAdults(parseInt(e.target.value))} required />
                  </div>
                  <div className="col-6 col-md-2 mt-2">
                    <label htmlFor="" className="checkin-label">
                      Children
                    </label>
                    <input type="number" min="0" max="10" className="checkin-inputbx" value={children} onChange={(e) => setChildren(parseInt(e.target.value))} />
                  </div>
                </div>
                <div className="text-center">
                  <button type="submit" className="rental-frm-btns">
                    Search
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Banner;