import{template as e}from"@gem-sdk/core";import{createAttr as t,createStyle as a,createClass as s}from"@gem-sdk/system";import{getAdaptiveImageClasses as o}from"../common/classes.js";import{createBlurDataURL as i,getAdaptiveImageData as m}from"../common/helpers.js";import{getAdaptivePictureStyles as d,getAdaptiveImageStyles as r}from"../common/styles.js";let h=h=>{let{alt:l,style:p,layout:c,srcSet:$,priority:g,className:L,aspectRatio:b,pageContext:n,pictureClass:w,borderRadius:y,...k}=h,{getDeviceSource:u}=m(h),{srcDesktop:f,srcTablet:z,srcMobile:x}=u({isLiquid:!0}),I=t({src:n?.enableLazyLoadImage&&!g?i($?.desktop?.width??0,$?.desktop?.height??0):f,"data-src":f}),j=a({...d()}),S=a({...r({layout:c,aspectRatio:b,borderRadius:y}),...p}),q=s({...o({className:L,hasLazyLoad:!g&&n?.enableLazyLoadImage,hasForceLoad:n?.isOptimizePlan})});return e`
    <picture style="${j}" class="${w}">
      ${e`
      ${x?`<source media="(max-width: 767px)" data-srcSet="${x}" srcset="${n?.enableLazyLoadImage&&!g?i($?.mobile?.width??$?.tablet?.width??$?.desktop?.width??0,$?.mobile?.height??$?.tablet?.height??$?.desktop?.height??0):x}" />`:""}
      ${z?`<source media="(max-width: 1024px)" data-srcSet="${z}" srcset="${n?.enableLazyLoadImage&&!g?i($?.tablet?.width??$?.desktop?.width??0,$?.tablet?.height??$?.desktop?.height??0):z}" />`:""}
    `}
      ${e`
      <img
        ${{...k}}
        ${{...I}}
        alt="${l}"
        width="100%"
        style="${S}"
        class="${q}"
      />
    `}
    </picture>
  `};export{h as default};
