'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
require('@transferwise/neptune-validation');
require('../provider/direction/DirectionProvider.js');
var useHasIntersected = require('../common/hooks/useHasIntersected/useHasIntersected.js');
require('../common/propsValues/breakpoint.js');
var jsxRuntime = require('react/jsx-runtime');

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

exports.default = Image;
//# sourceMappingURL=Image.js.map
