// @ts-nocheck
import { useSelector } from "react-redux";
import productDemoImage from "../../../../../../assets/images/demo_product.jpg";
import ProBanner from "../../../../../components/ProBanner/ProBanner";
import SidebarContainer from "../../../../../components/SidebarContainer";
import { replaceWithDynamicValue } from "../../../../../utils/utils";
const PreviewBadge = () => {
  const { badge_style } = useSelector((state) => state.badges);

  return (
    <SidebarContainer>
      <div className="wmx-border wmx-bg-white  wmx-p-3  wmx-shadow-sm  wmx-rounded-lg">
        <div className="wmx-relative wmx-h-60 2xl:wmx-h-72">
          <div
            className="wmx-h-60 2xl:wmx-h-72 wmx-z-10 wmx-relative"
            dangerouslySetInnerHTML={{
              __html: replaceWithDynamicValue(badge_style),
            }}
          />
          <img
            className="wmx-absolute wmx-inset-0 wmx-w-full wmx-h-60 2xl:wmx-h-72 wmx-object-cover"
            src={productDemoImage}
            alt="Demo Product"
          />
        </div>
      </div>
      <div className="wmx-mt-4 wmx-pb-4">
        <ProBanner />
      </div>
    </SidebarContainer>
  );
};
export default PreviewBadge;
