import { useState } from 'react'
import Image, { type ImageProps } from 'next/image'
import cx from 'classnames'

import { PropsWithClassName } from '@/lib/types'

type Props = PropsWithClassName &
  ImageProps & {
    placeholderSrc: string
    containerClassName?: string
  }

export default function BlurImage({ placeholderSrc, className = '', ...props }: Props) {
  const [isLoading, setLoading] = useState(true)

  return (
    <>
      <div className="absolute inset-0 overflow-hidden">
        <Image
          {...props}
          src={placeholderSrc}
          alt=""
          aria-hidden
          className={cx(
            'absolute inset-0 h-full blur-2xl scale-110',
            className,
            isLoading ? 'opacity-100' : 'opacity-0'
          )}
          unoptimized
        />
      </div>
      {/* eslint-disable-next-line jsx-a11y/alt-text */}
      <Image
        {...props}
        className={cx(className, isLoading ? 'opacity-0' : 'opacity-100')}
        onLoadingComplete={() => setLoading(false)}
      />
    </>
  )
}