'use client';
import{RenderIf as e,template as l}from"@gem-sdk/core";import o from"../../../grid/components/row/Row.liquid.js";import{createClass as s,createStyle as t}from"@gem-sdk/system";import{getClassContainerBanner as i,getClassContainerBackgoundImage as r,getClassOverlayBanner as m,getClassLinkBanner as a}from"./common/classes.js";import{getDimension as c,getStyleOverlay as n,getStyleContainerBackgoundImage as d}from"./common/styles.js";import{updateBackroundImageSrc as $,defaultImageUrl as f}from"./common/helpers.js";let g=({builderAttrs:g,builderProps:p,setting:v,style:y,children:k,rawChildren:u,advanced:h})=>{let{link:j,layout:b,width:w,verticalGutter:C,horizontalAlign:q,verticalAlign:x}=v??{};$({setting:v,collectionSrc:`{% if collection.image %} {{ collection.image.src | image_url}}  {% else %} ${f} {% endif  %}`});let B=s({...i({builderProps:p,setting:v,advanced:h})}),I=s({...r({setting:v})}),O=s({...m({setting:v})}),R=s({...a()}),S=t({...c({setting:v,style:y})}),W=t({...n({setting:v})}),_=t({...d({setting:v,hasCollectionImage:!1})});return l`
    <div ${{...g}} class="${B}" style="${S}">
      <div
        class="${I}"
        style="${_}"
      >
      </div>
      <div aria-label="Overlay" class="${O}" style="${W}"> </div>
      ${e(!!j?.link,`<a
          href="${j?.link}"
          target="${j?.target}"
          class="${R}"
        > </a>`)}
      ${o({setting:{layout:b,horizontalAlign:q,verticalAlign:x},styles:{verticalGutter:C,width:w,fullWidth:{desktop:!1,tablet:!1,mobile:!1}},style:y,children:k,rawChildren:u})}
    </div>
  `};export{g as default};
