export default function BookingForm({ BookingFormData }) {
  return (
    <div id="book_taxi">
      <section className="booking-form">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-12 col-sm-12 col-12">
              <div className="booking-text">
                <span className="small-text">Book Now</span>
                <h2>{BookingFormData?.booking_form_heading}</h2>
                <p>{BookingFormData?.booking_form_description}</p>
                <div className="booking-button">
                  <div className="call-btn">
                    <a href="tel:(+91)9825476243" className="btn-icon ripple">
                      <i className="fas fa-phone-alt"></i>
                    </a>
                    <div className="call-text">
                      <span>Call me to book taxi:</span>
                      <br />
                      <a href="tel:(+91)9825476243" className="btn-title">(+91){BookingFormData?.user.phone_number}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-6 col-md-12 col-sm-12 col-12">
              <form className="data-form">
                <div className="row g-3">
                  <div className="col-md-6">
                    <input type="text" className="form-control form-1" id="your-name" name="your-name" placeholder="Name" required />
                  </div>
                  <div className="col-md-6">
                    <input type="text" className="form-control form-1" id="your-number" name="your-number" placeholder="Phone Number" required />
                  </div>
                  <div className="col-md-6">
                    <input type="email" className="form-control form-1" id="your-email" name="your-email" placeholder="Email" required />
                  </div>
                  <div className="col-md-6">
                    <select className="form-select form-control form-1" aria-label="Default select example">
                      <option defaultValue>Vehicle Type</option>
                      <option value="1">Sedan</option>
                      <option value="2">Hatchback</option>
                      <option value="3">SUV</option>
                      <option value="4">MPV</option>
                      <option value="5">VAN</option>
                      <option value="6">BUS</option>
                    </select>
                  </div>
                  <div className="col-md-12">
                    <input id="datetimepicker" type="text" className="form-control form-1" placeholder="Date & Time" required />
                  </div>
                  <div className="col-md-12">
                    <input type="text" className="form-control form-1" id="your-subject" name="your-subject" placeholder="No of Passengers" required />
                  </div>
                  <div className="col-12">
                    <textarea className="form-control form-1" id="your-message" name="your-message" rows="4" placeholder="Description..." required></textarea>
                  </div>
                  <div className="col-12">
                    <div className="row">
                      <div className="submit-grp">
                        <button type="submit" className="btn fw-bold w-100 style-skew">
                          <span>BOOK TAXI NOW</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}