import React from 'react';
import { ClassAttributes, ImgHTMLAttributes } from 'react';
import { JSX } from 'react/jsx-runtime';
import { useBlurryLoad } from '../useBlurryLoad.ts';

export const BlurryLoadImg = (
  props: JSX.IntrinsicAttributes &
    ClassAttributes<HTMLImageElement> &
    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
) => {
  useBlurryLoad();
  return (
    <img alt="" {...props} className={`blurry-load ${props.className}`}></img>
  );
};