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