export default function ContactForm({ heading, subtitle, style = 'default' }) {
  const light = style === 'light'
  const wrapperClass = light
    ? 'input-light ajax-contact pb-30 pb-md-0'
    : 'ajax-contact'
  return (
    <div className={wrapperClass}>
      {heading && <h2 className="sec-title">{heading}</h2>}
      <div className="wpcf7 no-js" id="wpcf7-f523-p48-o1" lang="en-US" dir="ltr" data-wpcf7-id="523">
        <div className="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p><ul></ul></div>
        <form action="/contact" method="post" className="wpcf7-form init" aria-label="Contact form" noValidate="noValidate" data-status="init">
          <div className="row">
            <div className="form-group col-md-6">
              <span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Name" type="text" name="name" /></span>
              {light ? <i className="fas fa-user"></i> : <i className="fal fa-user"></i>}
            </div>
            <div className="form-group col-md-6">
              <span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email Address" type="email" name="email" /></span>
              {light ? <i className="fas fa-envelope"></i> : <i className="fal fa-envelope"></i>}
            </div>
            <div className="form-group col-md-6">
              <span className="wpcf7-form-control-wrap"><input className="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number form-control" aria-required="true" aria-invalid="false" placeholder="Phone Number" type="number" name="phone" /></span>
              {light ? <i className="fas fa-phone"></i> : <i className="fal fa-phone"></i>}
            </div>
            <div className="form-group col-md-6">
              <span className="wpcf7-form-control-wrap">
                <select className="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-select nice-select" aria-required="true" aria-invalid="false" name="subject">
                  <option value="">Select Subject</option>
                  <option value="General Query">General Query</option>
                  <option value="Help Support">Help Support</option>
                  <option value="Sales Support">Sales Support</option>
                </select>
              </span>
              {light ? <i className="fas fa-chevron-down"></i> : <i className="fal fa-chevron-down"></i>}
            </div>
            <div className="form-group col-12">
              <span className="wpcf7-form-control-wrap"><textarea cols="40" rows="10" maxLength="2000" className="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Message" name="message"></textarea></span>
              {light ? <i className="fas fa-pencil"></i> : <i className="fal fa-pencil"></i>}
            </div>
            <div className="form-btn col-12">
              <button className="th-btn">Send Message Now<i className="far fa-arrow-right ms-2"></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  )
}
