commerce/components/ui/sanity-image/sanity-image.tsx

'use client'

import { urlForImage } from 'lib/sanity/sanity.image'
import { cn } from 'lib/utils'
import Image from 'next/image'

interface SanityImageProps {
  image: object | any
  alt: string
  priority?: boolean
  width?: number
  height?: number
  quality?: number
  sizes?: string
  className?: string
}

const placeholderImg = '/product-img-placeholder.svg'

export default function SanityImage(props: SanityImageProps) {
  const {
    image: source,
    priority = false,
    quality = 75,
    alt = '',
    height = 1080,
    width = 1080,
    sizes = '100vw',
    className,
  } = props

  const rootClassName = cn('w-full h-auto', className)

  const image = source?.asset?._rev ? (
    <>
      <Image
        className={`${rootClassName}`}
        placeholder="blur"
        width={width}
        height={height}
        alt={alt}
        src={urlForImage(source)
          .width(width)
          .height(height)
          .quality(quality)
          .url()}
        sizes={sizes}
        priority={priority}
        blurDataURL={source.asset.metadata.lqip}
      />
    </>
  ) : (
    <>
      <Image
        className={`${rootClassName}`}
        width={width}
        height={height}
        alt={alt}
        src={placeholderImg}
        sizes={sizes}
        priority={false}
      />
    </>
  )

  return image
}