'use client';
import{jsx as e,Fragment as s,jsxs as a}from"react/jsx-runtime";import{FALLBACK_IMAGE as r,getAdaptiveImageData as t,IMAGE_PLACEHOLDER as m}from"../common/helpers.js";import{createAttr as o,createStyleReact as i,createStyle as l,createClass as d}from"@gem-sdk/system";import{getAdaptiveImageClasses as c}from"../common/classes.js";import{getAdaptivePictureStyles as p,getAdaptiveImageStyles as g}from"../common/styles.js";let AdaptiveImage=n=>{let{alt:f,style:h,srcSet:u,layout:y,priority:x,className:j,aspectRatio:v,borderRadius:k,pictureClass:w,enableLazyLoadImage:A,...I}=n,{getDeviceSource:z}=t(n),{srcTablet:L,srcMobile:N}=z(),S=o({loading:x?"eager":"lazy",src:u?.desktop?.src||r}),b=i({...p()}),P=l({...g({layout:y,aspectRatio:v,borderRadius:k}),...h}),q=d({...c({className:j,hasLazyLoad:!x&&A})}),B=()=>a(s,{children:[N&&e("source",{media:"(max-width: 767px)",srcSet:A?m:N}),L&&e("source",{media:"(max-width: 1024px)",srcSet:A?m:L})]}),C=()=>e("img",{...I,...S,alt:f,width:"100%",style:P,className:q,draggable:"false"});return e(s,{children:a("picture",{style:b,className:w,children:[B(),C()]})})};AdaptiveImage.defaultProps={layout:{desktop:"cover"}};export{AdaptiveImage as default};
