import { clsx } from 'clsx';
import { useRef } from 'react';
import { jsx } from 'react/jsx-runtime';
import { useHasIntersected } from '../common/hooks/useHasIntersected/useHasIntersected.mjs';

const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
const Image = ({
  id,
  src,
  alt,
  onLoad,
  onError,
  className,
  loading,
  stretch = true,
  role,
  shrink = true
}) => {
  const elementReference = useRef(null);
  const [hasIntersected] = useHasIntersected({
    elRef: elementReference,
    loading
  });
  let imageSource = src;
  let imageOnLoad = onLoad;
  if (loading === 'lazy' && !hasIntersected) {
    imageSource = EmptyTransparentImage;
    imageOnLoad = undefined;
  }
  return /*#__PURE__*/jsx("img", {
    ref: elementReference,
    id: id,
    alt: alt,
    src: imageSource,
    className: clsx(['tw-image', {
      'tw-image__stretch': stretch,
      'tw-image__shrink': shrink
    }, className]),
    role: role,
    onLoad: imageOnLoad,
    onError: onError
  });
};

export { EmptyTransparentImage, Image as default };
//# sourceMappingURL=Image.mjs.map
