text: import {isEmpty} from "lodash";
  import GalleryCarousel from "../gallery-carousel";
  import Price from "../price";
  import AddToCartButton from '../../cart/AddToCartButton';
  import NextImage from "../../../image";
  
  const SingleProduct = ({ product }) => {
      return (
          <div className="single-product container mx-auto my-32 px-4 xl:px-0">
  					<div className="grid md:grid-cols-2 gap-4">
  						<div className="product-images">
  
  							{ !isEmpty( product?.galleryImages?.nodes ) ? (
                                  <GalleryCarousel gallery={product?.galleryImages?.nodes}/>
  							) : !isEmpty( product.image ) ? (
                                  <NextImage
                                      sourceUrl={ product?.image?.sourceUrl }
                                      altText="Product Image"
                                      width="100%"
                                      height="auto"
                                  />
  							) : null }
  						</div>
  						<div className="product-info">
  							<h4 className="products-main-title text-2xl uppercase">{ product.name }</h4>
  							<div
  
  								dangerouslySetInnerHTML={ {
  									__html: product.description,
  								} }
  								className="product-description mb-5"
  							/>
                              <Price salesPrice={product?.price} regularPrice={product?.regularPrice}/>
  							<AddToCartButton product={ product }/>
  						</div>
  					</div>
  
  				</div>
      )
  }
  
  export default SingleProduct;
  
  
  