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

interface ImageBoxProps {
  'image'?: {asset?: any}
  'alt'?: string
  'width'?: number
  'height'?: number
  'size'?: string
  'classesWrapper'?: string
  'contain'?: boolean
  'data-sanity'?: string
}

export default function ImageBox({
  image,
  alt = 'Cover image',
  width = 3500,
  height = 2000,
  size = '100vw',
  classesWrapper,
  contain = false,
  ...props
}: ImageBoxProps) {
  const imageUrl =
    image &&
    urlForImage(image)
      ?.height(height)
      .width(width)
      .fit(contain ? 'max' : 'crop')
      .url()
  const blurUrl = image && urlForImage(image)?.width(800).height(800).fit('crop').url()

  return (
    <div
      className={`w-full overflow-hidden rounded-[3px] bg-gray-50 ${contain ? 'relative flex min-h-full items-center justify-center' : ''} ${classesWrapper}`}
      data-sanity={props['data-sanity']}
    >
      {imageUrl && contain && blurUrl && (
        <div
          className="absolute inset-0 scale-110 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `url(${blurUrl})`,
            filter: 'blur(20px)',
          }}
          aria-hidden
        />
      )}
      {imageUrl && (
        <Image
          className={
            contain
              ? 'relative z-10 max-h-full w-full object-contain'
              : 'absolute h-full w-full object-cover'
          }
          alt={alt}
          width={width}
          height={height}
          sizes={size}
          src={imageUrl}
        />
      )}
    </div>
  )
}