import React from "react";
interface SearchOurSiteProps {
  onClose: any;
}
export const SearchOurSite: React.FC<SearchOurSiteProps> = ({ onClose }) => {
  return (
    <>
      <div className="canvas-wrapper">
        <div className="modal-content">
          <header className="tf-search-head">
            <div className="title fw-5">
              Search our site
              <div className="close">
                <span
                  onClick={onClose}
                  className="icon-close icon-close-popup"
                  data-bs-dismiss={false ? "offcanvas" : ""}
                  aria-label="Close"
                ></span>
              </div>
            </div>
            <div className="tf-search-sticky">
              <form className="tf-mini-search-frm">
                <fieldset className="text">
                  <input
                    type="text"
                    placeholder="Search"
                    className=""
                    name="text"
                    tabIndex={0}
                    value=""
                    aria-required="true"
                  />
                </fieldset>
                <button className="" type="submit">
                  <i className="icon-search"></i>
                </button>
              </form>
            </div>
          </header>
          <div className="canvas-body p-0">
            <div className="tf-search-content">
              <div className="tf-cart-hide-has-results">
                <div className="tf-col-quicklink">
                  <div className="tf-search-content-title fw-5">Quick link</div>
                  <ul className="tf-quicklink-list">
                    <li className="tf-quicklink-item">
                      <a href="#" className="">
                        Fresh Cream Cakes
                      </a>
                    </li>
                    <li className="tf-quicklink-item">
                      <a href="#" className="">
                        Snacks
                      </a>
                    </li>
                    <li className="tf-quicklink-item">
                      <a href="#" className="">
                        Plum Cakes
                      </a>
                    </li>
                    <li className="tf-quicklink-item">
                      <a href="#" className="">
                        Breads
                      </a>
                    </li>
                  </ul>
                </div>
                <div className="tf-col-content">
                  <div className="tf-search-content-title fw-5">
                    Need some inspiration?
                  </div>
                  <div className="tf-search-hidden-inner">
                    <div className="tf-loop-item">
                      <div className="image">
                        <a href="#">
                          <img src="images/product01.png" alt="" />
                        </a>
                      </div>
                      <div className="content">
                        <a href="#">Blueberry Mimosa</a>
                        <div className="tf-product-info-price">
                          <div className="compare-at-price">₹1300.00</div>
                          <div className="price-on-sale fw-6">₹1250.00</div>
                        </div>
                      </div>
                    </div>
                    <div className="tf-loop-item">
                      <div className="image">
                        <a href="#">
                          <img src="images/product05.png" alt="" />
                        </a>
                      </div>
                      <div className="content">
                        <a href="#">Banana Chips</a>
                        <div className="tf-product-info-price">
                          <div className="price fw-6">₹105.00</div>
                        </div>
                      </div>
                    </div>
                    <div className="tf-loop-item">
                      <div className="image">
                        <a href="#">
                          <img src="images/product07.png" alt="" />
                        </a>
                      </div>
                      <div className="content">
                        <a href="#">Rich Plum Cake</a>
                        <div className="tf-product-info-price">
                          <div className="price fw-6">₹250.00</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};