import NextImage from 'next/image'
import { useState } from 'react'
import classNames from 'classnames'

/**
 * The `Image` component is used to display lazy-loaded images.
 *
 * @param {Object} props - Props passed to the `Image` component.
 * @param {string} props.src - URL of the image to be displayed.
 * @param {string} props.alt - Alternative text to be displayed if the image is not found.
 * @returns {JSX.Element} - Rendered `Image` component.
 */
const Image = ({ ...props }) => {
  const [isLoading, setIsLoading] = useState(true)

  const imageClassNames = classNames(
    'duration-500 ease-in-out',
    {
      'blur-2xl grayscale': isLoading,
      'blur-0 grayscale-0': !isLoading
    },
    props.className
  )

  return (
    <>
      <NextImage
        {...props}
        src={props.src || '/images/noimage.jpeg'}
        alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
        key={props.src || '/images/noimage.jpeg'}
        className={imageClassNames}
        width={256}
        height={256}
        onLoadingComplete={() => setIsLoading(false)}
      />
    </>
  )
}

export default Image