import { useState, useEffect } from 'react';

const useProgressiveImage = (src: string) => {
  const [sourceLoaded, setSourceLoaded] = useState<string>('');
  const [imageHeight, setImageHeight] = useState<number>(0);
  const [imageWidth, setImageWidth] = useState<number>(0);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setSourceLoaded(src);
      setImageHeight(img.height);
      setImageWidth(img.width);
    };
  }, [src]);

  return { sourceLoaded, imageHeight, imageWidth };
};

export default useProgressiveImage;