const SmallBanners = ({ banners }: any) => (
  <section className="bannersmcontainer">
    <div className="container container-xxl px-3">
      <div className="flex flex-wrap -mx-3 -mx-1 md:-mx-3">

        {banners?.map((banner: any, index: number) => (
          <div
            key={banner._id || index}
            className="2xl:w-1/2 xl:w-1/2 lg:w-1/2 md:w-1/2 sm:w-1/2 w-full px-3 mb-3 sm:mb-0"
          >
            <div className="bannersmbx relative">

              <img
                alt={banner.banner_title}
                src={banner.banner_image}
                className="w-full h-full object-cover"
              />

              <div className="bannersmovarlay absolute inset-0 flex items-center justify-center">
                <div className="w-full text-center">

                 

                  {/* Description (HTML safe render) */}
                  {banner.banner_description && (
                    <div
                      dangerouslySetInnerHTML={{
                        __html: banner.banner_description,
                      }}
                    />
                  )}

                  {/* Optional CTA */}
                  <a
                    className="theme-btn"
                    href="/products"
                  >
                    Shop Now
                  </a>

                </div>
              </div>

            </div>
          </div>
        ))}

      </div>
    </div>
  </section>
);

export default SmallBanners;