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

export const BlurryLoadDiv = (
  props: JSX.IntrinsicAttributes &
    ClassAttributes<HTMLImageElement> &
    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
) => {
  const isMobile = useMediaQuery('(max-width: 768px)');
  let blurry = '';
  if (!isMobile) {
    useBlurryLoad();
    blurry = 'blurry-load';
  }
  return (
    <div alt="" {...props} className={`${blurry} ${props.className}`}></div>
  );
};