import { clsx } from 'clsx';
import { useRef, useCallback } from 'react';
import '@transferwise/neptune-validation';
import '../provider/direction/DirectionProvider.mjs';
import { useHasIntersected } from '../common/hooks/useHasIntersected/useHasIntersected.mjs';
import '../common/propsValues/breakpoint.mjs';
import { jsx } from 'react/jsx-runtime';

const Image = ({
  id,
  src,
  alt,
  onLoad,
  onError,
  className,
  loading,
  stretch = true,
  role,
  shrink = true
}) => {
  const elementReference = useRef(null);
  const [hasIntersected] = useHasIntersected({
    elRef: elementReference,
    loading
  });
  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
  const handleLoad = useCallback(() => {
    if (hasIntersected && onLoad) {
      onLoad();
    }
  }, [hasIntersected, onLoad]);
  return /*#__PURE__*/jsx("img", {
    ref: elementReference,
    id: id,
    alt: alt,
    src: src,
    loading: loading,
    className: clsx(['tw-image', {
      'tw-image__stretch': stretch,
      'tw-image__shrink': shrink
    }, className]),
    role: role,
    onLoad: handleLoad,
    onError: onError
  });
};

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