const MiddleBanner = ({
  src,
  heading,
  align = "left",
  variant = "dark",
  buttonText = "Shop Now",
  buttonHref = "javascript:void(0);",
}: any) => {
  return (
    <section className={`middlebanner ${variant}`}>
      <img alt="" src={src} />

      <div className="middlecontent">
        <div className="container container-xxl px-3">
          <div className="flex flex-wrap -mx-3">
            <div
              className={`2xl:w-1/2 xl:w-1/2 lg:w-1/2 md:w-1/2 sm:w-1/2 w-2/3 px-3 ${
                align === "center"
                  ? "mx-auto text-center"
                  : align === "right"
                  ? "ml-auto text-left"
                  : "text-left"
              }`}
            >
              <h2
                dangerouslySetInnerHTML={{
                  __html: heading,
                }}
              />

              <a className="default-btn" href={buttonHref}>
                {buttonText}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MiddleBanner;