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