'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{useProduct as s}from"@gem-sdk/core";import a from"./layouts/FeatureImageWithGalleryImage.js";import o from"./FeatureImage.js";import m from"./layouts/OnlyGalleryImage.js";import{createClass as l,createStyle as i}from"@gem-sdk/system";import{getProductImageClass as g}from"../../common/classes.js";let c=c=>{let{setting:n,styles:d,builderProps:f,builderAttrs:u,style:I,children:p}=c,y={...n,...d},{layoutType:b="bottom-center"}=y,h=s(),E=e=>e?.medias?.edges.filter(e=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(e.node?.contentType||"")).map(e=>e?.node),D=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),O=r(()=>{let e=E(h)?.map(e=>(e&&(e.src=D(e.contentType)?e?.previewImage:e.src),e));return e?.length?e:[{id:h?.featuredImage?.id||"noImageError",baseID:h?.featuredImage?.baseID||"noImageError",src:h?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:h?.featuredImage?.width||480,height:h?.featuredImage?.height||480}]},[h]),j=l(g({align:y?.align})),P=i({...I});return e("div",{...u,className:j,style:P,children:[t("div",{className:j,children:["bottom-center","left","right"].includes(b)?t(a,{gallery:O,builderProps:f,setting:n,styles:d}):["one-col","two-col"].includes(b)?t(m,{gallery:O,builderProps:f,setting:n,styles:d}):t(o,{gallery:O,styles:d,setting:n})}),p]})};export{c as default};
