import clsx from 'clsx';
import NextImage, { ImageProps as NextImageProps } from 'next/image';
import { useState } from 'react';

import clsxm from '~/libs/clsxm';

type ImageProps = {
  rounded?: string;
  classNames?: {
    wrapper: string
  }
} & NextImageProps;

const Image = (props: ImageProps) => {
  const { alt, src, className, classNames, rounded, ...rest } = props;
  const [isLoading, setLoading] = useState(true);

  return (
    <div
      className={clsx(
        'overflow-hidden',
        isLoading ? 'animate-pulse' : '',
        rounded,
        classNames?.wrapper
      )}
    >
      <NextImage
        className={clsxm(
          'duration-500 ease-in-out',
          isLoading
            ? 'scale-[1.02] blur-xl grayscale'
            : 'scale-100 blur-0 grayscale-0',
          rounded,
          className
        )}
        src={src}
        alt={alt}
        loading='lazy'
        quality={100}
        onLoadingComplete={() => setLoading(false)}
        {...rest}
      />
    </div>
  );
};
export default Image;