'use client';
import{jsx as e}from"react/jsx-runtime";import{createClass as t,createStyleReact as a}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as r,getImageComparisonWrapperStyles as m}from"../common/classes.js";import{getSliderPositionPercentage as o}from"../common/helpers.js";import l from"./CompareImage.js";let i=({setting:i,styles:s,builderProps:g,advanced:n,...d})=>{let{imageLeft:p,altLeft:c,titleLeft:f,imageRight:I,altRight:h,titleRight:u,direction:v,defaultPercentage:b,leftImageLabel:j,rightImageLabel:x,sliderLineWidth:C,hoverToSlide:L,enableLabel:y,preload:A,enableSEOLeft:D,enableSEORight:P}=i??{},T=t(r()),k=a(m());return e("div",{style:k,className:T,"data-allow-active-on-mousemove":!0,children:e(l,{...d,styles:s,preload:A,advanced:n,leftImage:p,leftImageAlt:D?c:"",leftImageTitle:D?f:"",rightImage:I,rightImageAlt:P?h:"",rightImageTitle:P?u:"",leftImageLabel:j??"Before",rightImageLabel:x??"After",sliderLineWidth:C,sliderPositionPercentage:o(b),vertical:"vertical"===v,hover:L,enableLabel:y,componentUid:g?.uid,builderData:g?.builderData,pageContext:d.pageContext??{}})})};export{i as default};
