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